From 2efb39b6483bb8136a69f6604c9301c1bfdf0e9e Mon Sep 17 00:00:00 2001 From: Radoslav Petkov Date: Wed, 3 Aug 2016 22:08:39 +0300 Subject: [PATCH] Refactor cursor to change on mouse move/down to pointer when over shape handle --- Gruntfile.js | 1 - js/lib/jquery.awesome-cursor.js | 259 --------------------- js/src/annotations/osd-svg-ellipse.js | 58 +---- js/src/annotations/osd-svg-freehand.js | 29 ++- js/src/annotations/osd-svg-overlay.js | 5 +- js/src/annotations/osd-svg-pin.js | 20 +- js/src/annotations/osd-svg-polygon.js | 29 ++- js/src/annotations/osd-svg-rectangle.js | 55 +---- spec/annotations/osd-svg-ellipse.test.js | 20 +- spec/annotations/osd-svg-freehand.test.js | 31 +++ spec/annotations/osd-svg-pin.test.js | 29 +++ spec/annotations/osd-svg-polygon.test.js | 34 ++- spec/annotations/osd-svg-rectangle.test.js | 13 +- spec/widgets/contextControls.test.js | 2 +- 14 files changed, 192 insertions(+), 393 deletions(-) delete mode 100644 js/lib/jquery.awesome-cursor.js diff --git a/Gruntfile.js b/Gruntfile.js index f24c7ccfb3..7a407c87c9 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -40,7 +40,6 @@ module.exports = function(grunt) { 'js/lib/isfahan.js', 'js/lib/paper-full.min.js', 'js/lib/spectrum.js', - 'js/lib/jquery.awesome-cursor.js', 'js/lib/i18next.min.js' ], diff --git a/js/lib/jquery.awesome-cursor.js b/js/lib/jquery.awesome-cursor.js deleted file mode 100644 index eb2d03be7f..0000000000 --- a/js/lib/jquery.awesome-cursor.js +++ /dev/null @@ -1,259 +0,0 @@ -/*! jquery-awesome-cursor - v0.1.5 - 2015-12-09 -* https://jwarby.github.io/jquery-awesome-cursor -* Copyright (c) 2015 James Warwood; Licensed MIT */ -;(function(global, factory) { - if (typeof define === 'function' && define.amd) { - define(['jquery'], factory); - } else if (typeof exports === 'object') { - factory(require('jquery')); - } else { - factory(global.jQuery); - } -})(this, function($) { - 'use strict'; - - /** - * Parse the user-supplied hotspot string. Hotspot values as strings are used - * to set the cursor based on a human-readable value. - * - * ## Examples - * - * - `hotspot: 'center'`: the hotspot is in the center of the cursor - * - `hotspot: 'center left'`: the hotspot is centered vertically, and fixed - * to the left of the cursor horizontally - * - `hotspot: 'top right'`: the hotspot is at the top right - * - `hotspot: 'center top'`: the hotspot is centered horizontally, and fixed - * to the top of the cursor vertically - * - * @param {String} hotspot The string descriptor for the hotspot location - * @param {Number} size The size of the cursor - * - * @return {[Number]} an array with two elements, the x and y offsets for the - * hotspot - * - * @throws {Error} if `hotspot` is not a string, or `cursorSize` is not a - * number - */ - var parseHotspotString = function(hotspot, cursorSize) { - var xOffset = 0, - yOffset = 0; - - if (typeof hotspot !== 'string') { - $.error('Hotspot value is not a string and could not be parsed'); - } - - if (typeof cursorSize !== 'number') { - $.error('Cursor size must be a number'); - } - - hotspot.split(' ').forEach(function(part) { - switch (part) { - case 'center': - xOffset = cursorSize / 2; - yOffset = cursorSize / 2; - break; - case 'top': - yOffset = 0; - break; - case 'bottom': - - /* Browsers will default to 0 0 if yOffset is the very last pixel, - * hence - 1 - */ - yOffset = cursorSize - 1; - break; - case 'left': - xOffset = 0; - break; - case 'right': - xOffset = cursorSize - 1; - break; - } - }); - - return [xOffset, yOffset]; - }; - - /** - * Returns a new canvas with the same contents as `canvas`, flipped - * accordingly. - * - * @param {Canvas} canvas The canvas to flip - * @param {String} direction The direction flip the canvas in. Can be one - * of: - * - 'horizontal' - * - 'vertical' - * - 'both' - * - * @return {Canvas} a new canvas with the flipped contents of the input canvas - */ - function flipCanvas(canvas, direction) { - if ($.inArray(direction, ['horizontal', 'vertical', 'both']) === -1) { - $.error('Flip value must be one of horizontal, vertical or both'); - } - - var flippedCanvas = $('')[0], - flippedContext; - - flippedCanvas.width = canvas.width; - flippedCanvas.height = canvas.height; - - flippedContext = flippedCanvas.getContext('2d'); - - if (direction === 'horizontal' || direction === 'both') { - flippedContext.translate(canvas.width, 0); - flippedContext.scale(-1, 1); - } - - if (direction === 'vertical' || direction === 'both') { - flippedContext.translate(0, canvas.height); - flippedContext.scale(1, -1); - } - - flippedContext.drawImage(canvas, 0, 0, canvas.width, canvas.height); - - return flippedCanvas; - } - - $.fn.extend({ - awesomeCursor: function(iconName, options) { - options = $.extend({}, $.fn.awesomeCursor.defaults, options); - - if (typeof iconName !== 'string' || !iconName) { - $.error('First parameter must be the icon name, e.g. \'pencil\''); - } - - options.size = typeof options.size === 'string' ? - parseInt(options.size, 10) : options.size; - - if (typeof options.hotspot === 'string') { - options.hotspot = parseHotspotString(options.hotspot, options.size); - } - - // Clamp hotspot coordinates between 0 and size - 1 - options.hotspot = $.map(options.hotspot, function(coordinate) { - return Math.min(options.size - 1, Math.max(0, coordinate)); - }); - - var cssClass = (function(name, template) { - if (typeof template === 'string') { - return template.replace(/%s/g, name); - } else if (typeof template === 'function') { - return template(name); - } - - return name; - })(iconName, options.font.cssClass), - srcElement = $('', { - class: cssClass, - style: 'position: absolute; left: -9999px; top: -9999px;' - }), - canvas = $('')[0], - canvasSize = options.size, - hotspotOffset, unicode, dataURL, context; - - // Render element to the DOM, otherwise `getComputedStyle` will not work - $('body').append(srcElement); - - // Get the unicode value of the icon - unicode = window.getComputedStyle(srcElement[0], ':before') - .getPropertyValue('content'); - - // Remove the source element from the DOM - srcElement.remove(); - - // Increase the size of the canvas to account for the cursor's outline - if (options.outline) { - canvasSize += 2; - } - - if (options.rotate) { - - // @TODO: move this into it's own function - canvasSize = Math.ceil(Math.sqrt( - Math.pow(canvasSize, 2) + Math.pow(canvasSize, 2) - )); - - hotspotOffset = (canvasSize - options.size) / 2; - canvas.width = canvasSize; - canvas.height = canvasSize; - - context = canvas.getContext('2d'); - context.translate(canvas.width / 2, canvas.height / 2); - - // Canvas API works in radians, not degrees, hence `* Math.PI / 180` - context.rotate(options.rotate * Math.PI / 180); - context.translate(-canvas.width / 2, -canvas.height / 2); - - // Translate hotspot offset - options.hotspot[0] += options.hotspot[0] !== canvas.width / 2 ? - hotspotOffset : 0; - - options.hotspot[1] += options.hotspot[1] !== canvas.height / 2 ? - hotspotOffset : 0; - } else { - - canvas.height = canvasSize; - canvas.width = canvasSize; - - context = canvas.getContext('2d'); - } - - /* Firefox wraps the extracted unicode value in double quotes - #10 - * Chrome 43+ is wrapping the extracted value in single quotes - #14 - */ - unicode = unicode.replace(/['"]/g, ''); - - // Draw the cursor to the canvas - context.fillStyle = options.color; - context.font = options.size + 'px ' + options.font.family; - context.textAlign = 'center'; - context.textBaseline = 'middle'; - context.fillText(unicode, canvasSize / 2, canvasSize / 2); - - // Check for outline option - if (options.outline) { - context.lineWidth = 0.5; - context.strokeStyle = options.outline; - context.strokeText(unicode, canvasSize / 2, canvasSize / 2); - } - - // Check flip option - if (options.flip) { - canvas = flipCanvas(canvas, options.flip); - } - - dataURL = canvas.toDataURL('image/png'); - - $(this) - - // Fixes issue with Chrome not setting cursor if already set - .css('cursor', '') - .css('cursor', [ - 'url(' + dataURL + ')', - options.hotspot[0], - options.hotspot[1], - ',', - 'auto' - ].join(' ')) - ; - - // Maintain chaining - return this; - } - }); - - // Expose the defaults so that users can override them if they want to - $.fn.awesomeCursor.defaults = { - color: '#000000', - size: 18, - hotspot: [0, 0], - flip: '', - rotate: 0, - outline: null, - font: { - family: 'FontAwesome', - cssClass: 'fa fa-%s' - } - }; -}); diff --git a/js/src/annotations/osd-svg-ellipse.js b/js/src/annotations/osd-svg-ellipse.js index 7c54ef138f..98a3c41878 100644 --- a/js/src/annotations/osd-svg-ellipse.js +++ b/js/src/annotations/osd-svg-ellipse.js @@ -357,79 +357,27 @@ if(!overlay.disabled && overlay.hoveredPath && hitResult.item._name.toString().indexOf(overlay.hoveredPath._name.toString()) !==-1){ this.setCursor(hitResult,overlay); } - }else{ - jQuery(overlay.viewer.canvas).css('cursor','default'); } }, setCursor:function(hitResult,overlay){ - if(hitResult.type === 'handle-out' && hitResult.segment.data === 'rotation_handle'){ - jQuery(overlay.viewer.canvas).awesomeCursor('repeat', { - color: 'white', - hotspot: 'center' - }); - return; - } - if(hitResult.type === 'stroke' || hitResult.type === 'handle-in' || hitResult.type === 'handle-out'){ - jQuery(overlay.viewer.canvas).css('cursor','pointer'); + jQuery(overlay.viewer.canvas).css('cursor','move'); return; } - var cursor = ''; - // mouse over attached icon if(hitResult.type === 'pixel'){ jQuery(overlay.viewer.canvas).css('cursor', 'pointer'); return; } - var rotation = hitResult.item.data.rotation; - switch (hitResult.segment) { - case hitResult.item.segments[0]: - cursor = 'arrows-v'; - rotation -= 45; - break; - case hitResult.item.segments[1]: - cursor = 'arrows-v'; - break; - case hitResult.item.segments[2]: - cursor = 'arrows-v'; - break; - case hitResult.item.segments[3]: - cursor = 'arrows-v'; - break; - case hitResult.item.segments[4]: - cursor = 'arrows-v'; - rotation += 45; - break; - case hitResult.item.segments[5]: - cursor = 'arrows-h'; - break; - case hitResult.item.segments[6]: - cursor = 'arrows-v'; - rotation -= 45; - break; - case hitResult.item.segments[7]: - cursor = 'arrows-v'; - break; - case hitResult.item.segments[8]: - cursor = 'arrows-v'; - rotation += 45; - break; - case hitResult.item.segments[9]: - cursor = 'arrows-h'; - break; + if(hitResult.segment){ + jQuery(overlay.viewer.canvas).css('cursor','pointer'); } - jQuery(overlay.viewer.canvas).awesomeCursor(cursor, { - color: 'white', - hotspot: 'center', - rotate: rotation - }); - }, onMouseDown: function(event, overlay) { diff --git a/js/src/annotations/osd-svg-freehand.js b/js/src/annotations/osd-svg-freehand.js index abca06ff9b..920d6e829d 100644 --- a/js/src/annotations/osd-svg-freehand.js +++ b/js/src/annotations/osd-svg-freehand.js @@ -175,7 +175,34 @@ }, onMouseMove: function(event, overlay) { - // Empty block. + var hitResult = overlay.paperScope.project.hitTest(event.point, overlay.hitOptions); + if(hitResult && hitResult.item._name.toString().indexOf(this.idPrefix)!==-1){ + if(!overlay.disabled && overlay.hoveredPath && hitResult.item._name.toString().indexOf(overlay.hoveredPath._name.toString()) !==-1){ + this.setCursor(hitResult,overlay); + } + } + }, + + setCursor:function(hitResult,overlay){ + if(hitResult.type === 'stroke'){ + jQuery(overlay.viewer.canvas).css('cursor','move'); + return; + } + if(hitResult.type === 'handle-in' || hitResult.type === 'handle-out'){ + jQuery(overlay.viewer.canvas).css('cursor','pointer'); + return; + } + + // mouse over attached icon + if(hitResult.type === 'pixel'){ + jQuery(overlay.viewer.canvas).css('cursor', 'pointer'); + return; + } + + if(hitResult.segment){ + jQuery(overlay.viewer.canvas).css('cursor','pointer'); + } + }, onMouseDown: function(event, overlay) { diff --git a/js/src/annotations/osd-svg-overlay.js b/js/src/annotations/osd-svg-overlay.js index 0c97230810..97c21e8dd9 100644 --- a/js/src/annotations/osd-svg-overlay.js +++ b/js/src/annotations/osd-svg-overlay.js @@ -288,9 +288,9 @@ if (!this.overlay.disabled) { // We are in drawing mode if (this.overlay.paperScope.project.hitTest(event.point, this.overlay.hitOptions)) { - document.body.style.cursor = 'pointer'; + //document.body.style.cursor = 'pointer'; } else { - document.body.style.cursor = 'default'; + jQuery(this.overlay.viewer.canvas).css('cursor','default'); } event.stopPropagation(); if (this.overlay.currentTool) { @@ -870,6 +870,7 @@ this.eventEmitter.unsubscribe('changeFillColor.' + this.windowId); this.eventEmitter.unsubscribe('changeBorderColor.' + this.windowId); this.eventEmitter.unsubscribe('SET_OVERLAY_TOOLTIP.' + this.windowId); + this.eventEmitter.unsubscribe('CANCEL_ACTIVE_ANNOTATIONS.' + this.windowId); this.eventEmitter.unsubscribe('modeChange.' + this.windowId); this.eventEmitter.unsubscribe('CANCEL_ACTIVE_ANNOTATIONS.' + this.windowId); diff --git a/js/src/annotations/osd-svg-pin.js b/js/src/annotations/osd-svg-pin.js index a03d3e724b..2e3ba1d83b 100644 --- a/js/src/annotations/osd-svg-pin.js +++ b/js/src/annotations/osd-svg-pin.js @@ -115,7 +115,25 @@ }, onMouseMove: function(event, overlay) { - // Empty block. + var hitResult = overlay.paperScope.project.hitTest(event.point, overlay.hitOptions); + if(hitResult && hitResult.item._name.toString().indexOf(this.idPrefix)!==-1){ + if(!overlay.disabled && overlay.hoveredPath && hitResult.item._name.toString().indexOf(overlay.hoveredPath._name.toString()) !==-1){ + this.setCursor(hitResult,overlay); + } + } + }, + + setCursor:function(hitResult,overlay){ + if(hitResult.type === 'stroke' || hitResult.type === 'handle-in' || hitResult.type === 'handle-out' || hitResult.type === 'segment'){ + jQuery(overlay.viewer.canvas).css('cursor','move'); + return; + } + + // mouse over attached icon + if(hitResult.type === 'pixel'){ + jQuery(overlay.viewer.canvas).css('cursor', 'pointer'); + return; + } }, onMouseDown: function (event, overlay) { diff --git a/js/src/annotations/osd-svg-polygon.js b/js/src/annotations/osd-svg-polygon.js index 6c17cc8192..e58ec7482c 100644 --- a/js/src/annotations/osd-svg-polygon.js +++ b/js/src/annotations/osd-svg-polygon.js @@ -158,7 +158,34 @@ }, onMouseMove: function(event, overlay) { - // TODO should fix the mouse over cursor changes + var hitResult = overlay.paperScope.project.hitTest(event.point, overlay.hitOptions); + if(hitResult && hitResult.item._name.toString().indexOf(this.idPrefix)!==-1){ + if(!overlay.disabled && overlay.hoveredPath && hitResult.item._name.toString().indexOf(overlay.hoveredPath._name.toString()) !==-1){ + this.setCursor(hitResult,overlay); + } + } + }, + + setCursor:function(hitResult,overlay){ + if(hitResult.type === 'stroke'){ + jQuery(overlay.viewer.canvas).css('cursor','move'); + return; + } + + if(hitResult.type === 'handle-in' || hitResult.type === 'handle-out'){ + jQuery(overlay.viewer.canvas).css('cursor','pointer'); + return; + } + + // mouse over attached icon + if(hitResult.type === 'pixel'){ + jQuery(overlay.viewer.canvas).css('cursor', 'pointer'); + return; + } + + if(hitResult.segment){ + jQuery(overlay.viewer.canvas).css('cursor','pointer'); + } }, onMouseDown: function(event, overlay) { diff --git a/js/src/annotations/osd-svg-rectangle.js b/js/src/annotations/osd-svg-rectangle.js index 66dedce2ca..9ae1dfed4c 100644 --- a/js/src/annotations/osd-svg-rectangle.js +++ b/js/src/annotations/osd-svg-rectangle.js @@ -327,74 +327,25 @@ if(!overlay.disabled && overlay.hoveredPath && hitResult.item._name.toString().indexOf(overlay.hoveredPath._name.toString()) !==-1){ this.setCursor(hitResult,overlay); } - }else{ - jQuery(overlay.viewer.canvas).css('cursor','default'); } }, setCursor:function(hitResult,overlay){ - if(hitResult.type === 'handle-out'){ - jQuery(overlay.viewer.canvas).awesomeCursor('repeat', { - color: 'white', - hotspot: 'center' - }); - return; - } if(hitResult.type === 'stroke'){ - jQuery(overlay.viewer.canvas).css('cursor','pointer'); + jQuery(overlay.viewer.canvas).css('cursor','move'); return; } - var cursor = ''; - if(hitResult.type === 'pixel'){ jQuery(overlay.viewer.canvas).css('cursor', 'pointer'); return; } - - var rotation = hitResult.item.data.rotation; - switch (hitResult.segment) { - case hitResult.item.segments[0]: - cursor = 'arrows-v'; - rotation -= 45; - break; - case hitResult.item.segments[1]: - cursor = 'arrows-v'; - break; - case hitResult.item.segments[2]: - cursor = 'arrows-v'; - break; - case hitResult.item.segments[3]: - cursor = 'arrows-v'; - rotation += 45; - break; - case hitResult.item.segments[4]: - cursor = 'arrows-h'; - break; - case hitResult.item.segments[5]: - cursor = 'arrows-v'; - rotation -= 45; - break; - case hitResult.item.segments[6]: - cursor = 'arrows-v'; - break; - case hitResult.item.segments[7]: - cursor = 'arrows-v'; - rotation += 45; - break; - case hitResult.item.segments[8]: - cursor = 'arrows-h'; - break; + if(hitResult.segment){ + jQuery(overlay.viewer.canvas).css('cursor','pointer'); } - jQuery(overlay.viewer.canvas).awesomeCursor(cursor, { - color: 'white', - hotspot: 'center', - rotate: rotation - }); - }, onMouseDown: function(event, overlay) { diff --git a/spec/annotations/osd-svg-ellipse.test.js b/spec/annotations/osd-svg-ellipse.test.js index e97285d9bd..b5f9113dd5 100644 --- a/spec/annotations/osd-svg-ellipse.test.js +++ b/spec/annotations/osd-svg-ellipse.test.js @@ -477,7 +477,7 @@ describe('Ellipse', function() { }); - it('should change cursor to pointer when stroke is hit',function(){ + it('should change cursor to move when stroke is hit',function(){ var hitResult = { type:'stroke' }; @@ -485,10 +485,10 @@ describe('Ellipse', function() { overlay.viewer.canvas = this.canvas; this.ellipse.setCursor(hitResult,overlay); - expect(jQuery(overlay.viewer.canvas).css('cursor')).toBe('pointer'); + expect(jQuery(overlay.viewer.canvas).css('cursor')).toBe('move'); }); - it('should change cursor to pointer when handle-in is hit',function(){ + it('should change cursor to move when handle-in is hit',function(){ var hitResult = { type:'handle-in' }; @@ -496,10 +496,10 @@ describe('Ellipse', function() { overlay.viewer.canvas = this.canvas; this.ellipse.setCursor(hitResult,overlay); - expect(jQuery(overlay.viewer.canvas).css('cursor')).toBe('pointer'); + expect(jQuery(overlay.viewer.canvas).css('cursor')).toBe('move'); }); - it('should change cursor to pointer when handle-out is hit',function(){ + it('should change cursor to move when handle-out is hit',function(){ var hitResult = { type:'handle-in' }; @@ -507,22 +507,22 @@ describe('Ellipse', function() { overlay.viewer.canvas = this.canvas; this.ellipse.setCursor(hitResult,overlay); - expect(jQuery(overlay.viewer.canvas).css('cursor')).toBe('pointer'); + expect(jQuery(overlay.viewer.canvas).css('cursor')).toBe('move'); }); // it('should change cursor when hovering icon',function(){ // // }); - it('should change cursor to default',function(){ + it('should change cursor on mouse move',function(){ var event = TestUtils.getEvent({},{ - x: 1000, - y: 1000 + x: this.initialPoint.x, + y: this.initialPoint.y }); overlay.viewer.canvas = this.canvas; this.ellipse.onMouseMove(event,overlay); - expect(jQuery(overlay.viewer.canvas).css('cursor')).toBe('default'); + expect(jQuery(overlay.viewer.canvas).css('cursor')).toBe('move'); }); it('should not update selection if the item is part of selected shape',function(){ diff --git a/spec/annotations/osd-svg-freehand.test.js b/spec/annotations/osd-svg-freehand.test.js index a561d7f8c3..4795bb3fec 100644 --- a/spec/annotations/osd-svg-freehand.test.js +++ b/spec/annotations/osd-svg-freehand.test.js @@ -463,5 +463,36 @@ describe('Freehand', function() { expect(item.data.self.resize).toHaveBeenCalledWith(24); }); + + it('should change cursor on mouse move',function(){ + var event = TestUtils.getEvent({}, { + 'x': this.initialPoint.x, + 'y': this.initialPoint.y + }); + overlay.viewer.canvas = this.canvas; + overlay.hoveredPath = this.shape; + this.freehand.onMouseMove(event,overlay); + + expect(jQuery(overlay.viewer.canvas).css('cursor')).toBe('pointer'); + }); + + it('should set cursor to move when stoke is hit',function(){ + var hitResult = { + type:'stroke' + }; + overlay.viewer.canvas = this.canvas; + this.freehand.setCursor(hitResult,overlay); + expect(jQuery(overlay.viewer.canvas).css('cursor')).toBe('move'); + }); + + it('should set cursor to pointer when icon is hit',function(){ + var hitResult = { + type:'pixel' + }; + overlay.viewer.canvas = this.canvas; + this.freehand.setCursor(hitResult,overlay); + expect(jQuery(overlay.viewer.canvas).css('cursor')).toBe('pointer'); + }); + }); }); \ No newline at end of file diff --git a/spec/annotations/osd-svg-pin.test.js b/spec/annotations/osd-svg-pin.test.js index dd401e564e..b68b5284a5 100644 --- a/spec/annotations/osd-svg-pin.test.js +++ b/spec/annotations/osd-svg-pin.test.js @@ -249,6 +249,35 @@ describe('Pin', function() { expect(overlay.mode).toBe('create'); }); + it('should change cursor on mouse move',function(){ + var event = TestUtils.getEvent({}, { + 'x': this.initialPoint.x, + 'y': this.initialPoint.y + }); + overlay.viewer.canvas = this.canvas; + overlay.hoveredPath = this.shape; + this.pin.onMouseMove(event,overlay); + + expect(jQuery(overlay.viewer.canvas).css('cursor')).toBe('move'); + }); + + it('should set cursor to pointer when stoke is hit',function(){ + var hitResult = { + type:'stroke' + }; + overlay.viewer.canvas = this.canvas; + this.pin.setCursor(hitResult,overlay); + expect(jQuery(overlay.viewer.canvas).css('cursor')).toBe('move'); + }); + + it('should set cursor to pointer when icon is hit',function(){ + var hitResult = { + type:'pixel' + }; + overlay.viewer.canvas = this.canvas; + this.pin.setCursor(hitResult,overlay); + expect(jQuery(overlay.viewer.canvas).css('cursor')).toBe('pointer'); + }); it('should resize the trash can icon',function(){ var _this = this; diff --git a/spec/annotations/osd-svg-polygon.test.js b/spec/annotations/osd-svg-polygon.test.js index 5f28fed1e9..85494e82bc 100644 --- a/spec/annotations/osd-svg-polygon.test.js +++ b/spec/annotations/osd-svg-polygon.test.js @@ -280,6 +280,36 @@ describe('Polygon', function() { expect(this.shape.fillColor.alpha).toBe(overlay.fillColorAlpha); }); + it('should change cursor on mouse move',function(){ + var event = TestUtils.getEvent({}, { + 'x': this.initialPoint.x, + 'y': this.initialPoint.y + }); + overlay.viewer.canvas = this.canvas; + overlay.hoveredPath = this.shape; + this.polygon.onMouseMove(event,overlay); + + expect(jQuery(overlay.viewer.canvas).css('cursor')).toBe('pointer'); + }); + + it('should set cursor to pointer when stoke is hit',function(){ + var hitResult = { + type:'stroke' + }; + overlay.viewer.canvas = this.canvas; + this.polygon.setCursor(hitResult,overlay); + expect(jQuery(overlay.viewer.canvas).css('cursor')).toBe('move'); + }); + + it('should set cursor to pointer when icon is hit',function(){ + var hitResult = { + type:'pixel' + }; + overlay.viewer.canvas = this.canvas; + this.polygon.setCursor(hitResult,overlay); + expect(jQuery(overlay.viewer.canvas).css('cursor')).toBe('pointer'); + }); + it('should select polygon shape', function() { var event = TestUtils.getEvent({}, { 'x': this.initialPoint.x - 100, @@ -292,8 +322,6 @@ describe('Polygon', function() { expect(overlay.mode).toBe('create'); expect(overlay.segment).toBeNull(); expect(overlay.path).not.toBe(this.shape); - expect(document.body.style.cursor).toBe('default'); - event = TestUtils.getEvent({}, { 'x': this.initialPoint.x - 100, 'y': this.initialPoint.y - 100 @@ -321,8 +349,6 @@ describe('Polygon', function() { expect(this.shape.segments[idx].point.y).toBeCloseTo(expected[idx].y, 6); } - expect(document.body.style.cursor).toBe('default'); - overlay = MockOverlay.getOverlay(paper); overlay.mode = 'edit'; diff --git a/spec/annotations/osd-svg-rectangle.test.js b/spec/annotations/osd-svg-rectangle.test.js index f9ce0d1bab..9f91864f3f 100644 --- a/spec/annotations/osd-svg-rectangle.test.js +++ b/spec/annotations/osd-svg-rectangle.test.js @@ -526,7 +526,7 @@ describe('Rectangle', function() { }); - it('should change cursor to pointer',function(){ + it('should change cursor to move when stroke is hit',function(){ var hitResult = { type:'stroke' }; @@ -534,7 +534,7 @@ describe('Rectangle', function() { overlay.viewer.canvas = this.canvas; this.rectangle.setCursor(hitResult,overlay); - expect(jQuery(overlay.viewer.canvas).css('cursor')).toBe('pointer'); + expect(jQuery(overlay.viewer.canvas).css('cursor')).toBe('move'); }); // it('should change cursor to pointer when hovering delete icon',function(){ @@ -542,15 +542,16 @@ describe('Rectangle', function() { // // }); - it('should change cursor to default',function(){ + it('should change cursor on mouse move',function(){ var event = TestUtils.getEvent({},{ - x: 1000, - y: 1000 + x: this.initialPoint.x, + y: this.initialPoint.y }); overlay.viewer.canvas = this.canvas; + overlay.hoveredPath = this.shape; this.rectangle.onMouseMove(event,overlay); - expect(jQuery(overlay.viewer.canvas).css('cursor')).toBe('default'); + expect(jQuery(overlay.viewer.canvas).css('cursor')).toBe('pointer'); }); it('should not update selection if the item is part of selected shape',function(){ diff --git a/spec/widgets/contextControls.test.js b/spec/widgets/contextControls.test.js index 1dd6345126..1e5da3ab1f 100644 --- a/spec/widgets/contextControls.test.js +++ b/spec/widgets/contextControls.test.js @@ -40,7 +40,7 @@ describe('ContextControls', function() { "annotationLayer" : true, "annotationCreation" : true, "annotationState" : 'annoOff', - "annotationRefresh" : false, + "annotationRefresh" : false }, "imageManipulation" : { "manipulationLayer" : true,