From e9500429226a2d1f9ba420c9aed1144cb380380b Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Fri, 5 Apr 2013 11:52:41 -0700 Subject: [PATCH] Fix cursors, add tests --- css/app.css | 4 ++ css/map.css | 39 ++++++++++++- test/index.html | 1 + test/index_packaged.html | 1 + test/spec/renderer/map.js | 113 ++++++++++++++++++++++++++++++++++++++ 5 files changed, 155 insertions(+), 3 deletions(-) diff --git a/css/app.css b/css/app.css index 0194acd69..eff5c8db8 100644 --- a/css/app.css +++ b/css/app.css @@ -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; } diff --git a/css/map.css b/css/map.css index 935c4389b..ab8325c65 100644 --- a/css/map.css +++ b/css/map.css @@ -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 diff --git a/test/index.html b/test/index.html index f2d4d6bfc..aae9c6458 100644 --- a/test/index.html +++ b/test/index.html @@ -4,6 +4,7 @@ Mocha Tests +
diff --git a/test/index_packaged.html b/test/index_packaged.html index 420043c91..4d9b131e3 100644 --- a/test/index_packaged.html +++ b/test/index_packaged.html @@ -4,6 +4,7 @@ Mocha Tests +
diff --git a/test/spec/renderer/map.js b/test/spec/renderer/map.js index de8abdf61..84966003d 100644 --- a/test/spec/renderer/map.js +++ b/test/spec/renderer/map.js @@ -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/); + }); + }); });