CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-25 01:24:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix cursors, add tests

Browse Source
This commit is contained in:
John Firebaugh
2013-04-05 11:52:41 -07:00
parent f356e3e357
commit e950042922
5 changed files with 155 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/app.css
+4
View File
@@ -59,6 +59,7 @@ a, button, input, textarea {
}
a, button {
cursor: pointer; /* Opera compatibility */
cursor: url(../img/cursor-pointer.png) 6 1, pointer;
}
@@ -1073,6 +1074,7 @@ input[type=number] {
}
.checkselect label:hover {
cursor: pointer; /* Opera compatibility */
cursor: url(../img/cursor-pointer.png) 6 1, pointer;
background: #f1f1f1;
}
@@ -1543,6 +1545,7 @@ img.wiki-image {
height: 100%;
display: block;
float: left;
cursor: pointer; /* Opera compatibility */
cursor: url(../img/cursor-pointer.png) 6 1, pointer;
}
@@ -2226,6 +2229,7 @@ img.wiki-image {
.radial-menu-item {
fill: white;
cursor: pointer; /* Opera compatibility */
cursor: url(../img/cursor-pointer.png) 6 1, pointer;
}
css/map.css
+36 -3
View File
@@ -860,6 +860,8 @@ text.point {
/* Cursors */
#map:hover {
cursor: auto; /* Opera */
cursor: url(../img/cursor-grab.png) 9 9, auto; /* FF */
cursor: -webkit-image-set(
url(../img/cursor-grab.png) 1x,
url(../img/cursor-grab2x.png) 2x
@@ -867,6 +869,8 @@ text.point {
}
#map:active {
cursor: pointer; /* Opera */
cursor: url(../img/cursor-grabbing.png) 9 9, auto; /* FF */
cursor: -webkit-image-set(
url(../img/cursor-grabbing.png) 1x,
url(../img/cursor-grabbing2x.png) 2x
@@ -875,6 +879,8 @@ text.point {
.mode-browse .point,
.mode-select .point {
cursor: pointer; /* Opera */
cursor: url(../img/cursor-select-point.png), pointer; /* FF */
cursor: -webkit-image-set(
url(../img/cursor-select-point.png) 1x,
url(../img/cursor-select-point2x.png) 2x
@@ -883,6 +889,8 @@ text.point {
.mode-select .vertex,
.mode-browse .vertex {
cursor: pointer; /* Opera */
cursor: url(../img/cursor-select-vertex.png), pointer; /* FF */
cursor: -webkit-image-set(
url(../img/cursor-select-vertex.png) 1x,
url(../img/cursor-select-vertex2x.png) 2x
@@ -891,6 +899,8 @@ text.point {
.mode-browse .line,
.mode-select .line {
cursor: pointer; /* Opera */
cursor: url(../img/cursor-select-line.png), pointer; /* FF */
cursor: -webkit-image-set(
url(../img/cursor-select-line.png) 1x,
url(../img/cursor-select-line2x.png) 2x
@@ -899,6 +909,8 @@ text.point {
.mode-select .area,
.mode-browse .area {
cursor: pointer; /* Opera */
cursor: url(../img/cursor-select-area.png), pointer; /* FF */
cursor: -webkit-image-set(
url(../img/cursor-select-area.png) 1x,
url(../img/cursor-select-area2x.png) 2x
@@ -907,6 +919,8 @@ text.point {
.mode-select .midpoint,
.mode-browse .midpoint {
cursor: pointer; /* Opera */
cursor: url(../img/cursor-select-split.png), pointer; /* FF */
cursor: -webkit-image-set(
url(../img/cursor-select-split.png) 1x,
url(../img/cursor-select-split2x.png) 2x
@@ -917,6 +931,8 @@ text.point {
.mode-select .behavior-multiselect .vertex,
.mode-select .behavior-multiselect .line,
.mode-select .behavior-multiselect .area {
cursor: pointer; /* Opera */
cursor: url(../img/cursor-select-add.png), pointer; /* FF */
cursor: -webkit-image-set(
url(../img/cursor-select-add.png) 1x,
url(../img/cursor-select-add2x.png) 2x
@@ -924,6 +940,8 @@ text.point {
}
.mode-select .behavior-multiselect .selected {
cursor: pointer; /* Opera */
cursor: url(../img/cursor-select-remove.png), pointer; /* FF */
cursor: -webkit-image-set(
url(../img/cursor-select-remove.png) 1x,
url(../img/cursor-select-remove2x.png) 2x
@@ -936,6 +954,8 @@ text.point {
#map .area:active,
#map .midpoint:active,
#map .mode-select .selected {
cursor: pointer; /* Opera */
cursor: url(../img/cursor-select-acting.png), pointer; /* FF */
cursor: -webkit-image-set(
url(../img/cursor-select-acting.png) 1x,
url(../img/cursor-select-acting2x.png) 2x
@@ -947,7 +967,8 @@ text.point {
.mode-add-line #map:hover,
.mode-add-area #map:hover,
.mode-drag-node #map:hover {
cursor: crosshair;
cursor: crosshair; /* Opera */
cursor: url(../img/cursor-draw.png) 9 9, crosshair; /* FF */
cursor: -webkit-image-set(
url(../img/cursor-draw.png) 1x,
url(../img/cursor-draw2x.png) 2x
@@ -958,12 +979,22 @@ text.point {
.mode-draw-area .behavior-hover .way,
.mode-add-line .behavior-hover .way,
.mode-add-area .behavior-hover .way,
.mode-drag-node .behavior-hover .way,
.mode-drag-node .behavior-hover .way {
cursor: crosshair; /* Opera */
cursor: url(../img/cursor-draw-connect-line.png) 9 9, crosshair; /* FF */
cursor: -webkit-image-set(
url(../img/cursor-draw-connect-line.png) 1x,
url(../img/cursor-draw-connect-line2x.png) 2x
) 9 9, crosshair;
}
.mode-draw-line .behavior-hover .vertex,
.mode-draw-area .behavior-hover .vertex,
.mode-add-line .behavior-hover .vertex,
.mode-add-area .behavior-hover .vertex,
.mode-drag-node .behavior-hover .vertex, {
.mode-drag-node .behavior-hover .vertex {
cursor: crosshair; /* Opera */
cursor: url(../img/cursor-draw-connect-vertex.png) 9 9, crosshair; /* FF */
cursor: -webkit-image-set(
url(../img/cursor-draw-connect-vertex.png) 1x,
url(../img/cursor-draw-connect-vertex2x.png) 2x
@@ -974,6 +1005,8 @@ text.point {
.lasso #map:hover,
.lasso .way,
.lasso .vertex {
cursor: crosshair; /* Opera */
cursor: url(../img/cursor-draw.png) 9 9, crosshair; /* FF */
cursor: -webkit-image-set(
url(../img/cursor-draw.png) 1x,
url(../img/cursor-draw2x.png) 2x
test/index.html
+1
View File
@@ -4,6 +4,7 @@
<meta charset='utf-8'>
<title>Mocha Tests</title>
<link rel="stylesheet" href="../node_modules/mocha/mocha.css">
<link rel="stylesheet" href="css/map.css">
</head>
<body>
<div id="mocha"></div>
test/index_packaged.html
+1
View File
@@ -4,6 +4,7 @@
<meta charset='utf-8'>
<title>Mocha Tests</title>
<link rel="stylesheet" href="../node_modules/mocha/mocha.css">
<link rel="stylesheet" href="css/map.css">
</head>
<body>
<div id="mocha"></div>
test/spec/renderer/map.js
+113
View File
@@ -120,4 +120,117 @@ describe('iD.Map', function() {
expect(map.surface.node().tagName).to.equal("svg");
});
});
describe('cursors', function() {
var mode, behavior, point, vertex, line, area, midpoint;
beforeEach(function() {
mode = d3.select('body').append('div');
behavior = mode.append('div');
point = behavior.append('div').attr('class', 'node point');
vertex = behavior.append('div').attr('class', 'node vertex');
line = behavior.append('div').attr('class', 'way line');
area = behavior.append('div').attr('class', 'way area');
midpoint = behavior.append('div').attr('class', 'midpoint');
});
afterEach(function() {
mode.remove();
});
function cursor(selection) {
return window.getComputedStyle(selection.node()).cursor;
}
specify('points use select-point cursor in browse and select modes', function() {
mode.attr('class', 'mode-browse');
expect(cursor(point)).to.match(/cursor-select-point/);
mode.attr('class', 'mode-select');
expect(cursor(point)).to.match(/cursor-select-point/);
});
specify('vertices use select-vertex cursor in browse and select modes', function() {
mode.attr('class', 'mode-browse');
expect(cursor(vertex)).to.match(/cursor-select-vertex/);
mode.attr('class', 'mode-select');
expect(cursor(vertex)).to.match(/cursor-select-vertex/);
});
specify('lines use select-line cursor in browse and select modes', function() {
mode.attr('class', 'mode-browse');
expect(cursor(line)).to.match(/cursor-select-line/);
mode.attr('class', 'mode-select');
expect(cursor(line)).to.match(/cursor-select-line/);
});
specify('areas use select-area cursor in browse and select modes', function() {
mode.attr('class', 'mode-browse');
expect(cursor(area)).to.match(/cursor-select-area/);
mode.attr('class', 'mode-select');
expect(cursor(area)).to.match(/cursor-select-area/);
});
specify('midpoints use select-split cursor in browse and select modes', function() {
mode.attr('class', 'mode-browse');
expect(cursor(midpoint)).to.match(/cursor-select-split/);
mode.attr('class', 'mode-select');
expect(cursor(midpoint)).to.match(/cursor-select-split/);
});
specify('features use select-add cursor for adding to a selection', function() {
mode.attr('class', 'mode-select');
behavior.attr('class', 'behavior-multiselect');
expect(cursor(point)).to.match(/cursor-select-add/);
expect(cursor(vertex)).to.match(/cursor-select-add/);
expect(cursor(line)).to.match(/cursor-select-add/);
expect(cursor(area)).to.match(/cursor-select-add/);
});
specify('features use select-remove cursor for removing from a selection', function() {
mode.attr('class', 'mode-select');
behavior.attr('class', 'behavior-multiselect');
point.classed('selected', true);
vertex.classed('selected', true);
line.classed('selected', true);
area.classed('selected', true);
expect(cursor(point)).to.match(/cursor-select-remove/);
expect(cursor(vertex)).to.match(/cursor-select-remove/);
expect(cursor(line)).to.match(/cursor-select-remove/);
expect(cursor(area)).to.match(/cursor-select-remove/);
});
specify('hovered ways use draw-connect-line cursor in draw modes', function() {
behavior.attr('class', 'behavior-hover');
mode.attr('class', 'mode-draw-line');
expect(cursor(line)).to.match(/cursor-draw-connect-line/);
expect(cursor(area)).to.match(/cursor-draw-connect-line/);
mode.attr('class', 'mode-draw-area');
expect(cursor(line)).to.match(/cursor-draw-connect-line/);
expect(cursor(area)).to.match(/cursor-draw-connect-line/);
mode.attr('class', 'mode-add-line');
expect(cursor(line)).to.match(/cursor-draw-connect-line/);
expect(cursor(area)).to.match(/cursor-draw-connect-line/);
mode.attr('class', 'mode-add-area');
expect(cursor(line)).to.match(/cursor-draw-connect-line/);
expect(cursor(area)).to.match(/cursor-draw-connect-line/);
mode.attr('class', 'mode-drag-node');
expect(cursor(line)).to.match(/cursor-draw-connect-line/);
expect(cursor(area)).to.match(/cursor-draw-connect-line/);
});
specify('hovered vertices use draw-connect-vertex cursor in draw modes', function() {
behavior.attr('class', 'behavior-hover');
mode.attr('class', 'mode-draw-line');
expect(cursor(vertex)).to.match(/cursor-draw-connect-vertex/);
mode.attr('class', 'mode-draw-area');
expect(cursor(vertex)).to.match(/cursor-draw-connect-vertex/);
mode.attr('class', 'mode-add-line');
expect(cursor(vertex)).to.match(/cursor-draw-connect-vertex/);
mode.attr('class', 'mode-add-area');
expect(cursor(vertex)).to.match(/cursor-draw-connect-vertex/);
mode.attr('class', 'mode-drag-node');
expect(cursor(vertex)).to.match(/cursor-draw-connect-vertex/);
});
});
});