diff options
author | Valerio Virgillito | 2012-06-25 16:37:06 -0700 |
---|---|---|
committer | Valerio Virgillito | 2012-06-25 16:37:06 -0700 |
commit | 96e1bb2a8d842dc37e4982a273a5bde48f6944c3 (patch) | |
tree | b21bb4aa8efaff3105456a0a403343ef1ed76ab7 | |
parent | 4e5331c9967d4a24df56160188cc916a4051052b (diff) | |
download | ninja-96e1bb2a8d842dc37e4982a273a5bde48f6944c3.tar.gz |
Fix for IKNINJA-1615: Enable mouse up event on top of the user document scrollbar
Chrome has a bug where mouse up does not fire when the mouse is released on top of a scrollbar. To work around this issue, I temporary increase the canvas to cover the scrollbar when drawing and then shrink it back on mouse up.
Signed-off-by: Valerio Virgillito <valerio@motorola.com>
-rwxr-xr-x | js/mediators/mouse-mediator.js | 31 | ||||
-rwxr-xr-x | js/ninja.reel/ninja.html | 4 | ||||
-rwxr-xr-x | js/stage/stage.reel/stage.js | 33 |
3 files changed, 30 insertions, 38 deletions
diff --git a/js/mediators/mouse-mediator.js b/js/mediators/mouse-mediator.js deleted file mode 100755 index 4d1fb62a..00000000 --- a/js/mediators/mouse-mediator.js +++ /dev/null | |||
@@ -1,31 +0,0 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
7 | var Montage = require("montage/core/core").Montage, | ||
8 | Component = require("montage/ui/component").Component; | ||
9 | |||
10 | exports.MouseMediator = Montage.create(Component, { | ||
11 | hasTemplate: { | ||
12 | value: false | ||
13 | }, | ||
14 | |||
15 | deserializedFromTemplate: { | ||
16 | value: function() { | ||
17 | document.addEventListener("mouseup", this, false); | ||
18 | } | ||
19 | }, | ||
20 | |||
21 | handleMouseup: { | ||
22 | value: function(event) { | ||
23 | |||
24 | if(event._event.target.id !== "drawingCanvas") { | ||
25 | NJevent( "appMouseUp"); | ||
26 | } | ||
27 | |||
28 | return true; | ||
29 | } | ||
30 | } | ||
31 | }); | ||
diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index beae59d9..1bd002ae 100755 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html | |||
@@ -261,10 +261,6 @@ | |||
261 | } | 261 | } |
262 | }, | 262 | }, |
263 | 263 | ||
264 | "mouseMediator": { | ||
265 | "prototype": "js/mediators/mouse-mediator" | ||
266 | }, | ||
267 | |||
268 | "keyboardMediator": { | 264 | "keyboardMediator": { |
269 | "prototype": "js/mediators/keyboard-mediator", | 265 | "prototype": "js/mediators/keyboard-mediator", |
270 | "properties":{ | 266 | "properties":{ |
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index f4de3070..1de4e003 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js | |||
@@ -343,8 +343,6 @@ exports.Stage = Montage.create(Component, { | |||
343 | // Hide the canvas | 343 | // Hide the canvas |
344 | this.hideCanvas(true); | 344 | this.hideCanvas(true); |
345 | 345 | ||
346 | this.eventManager.addEventListener( "appMouseUp", this, false); | ||
347 | |||
348 | this.eventManager.addEventListener( "enableStageMove", this, false); | 346 | this.eventManager.addEventListener( "enableStageMove", this, false); |
349 | this.eventManager.addEventListener( "disableStageMove", this, false); | 347 | this.eventManager.addEventListener( "disableStageMove", this, false); |
350 | 348 | ||
@@ -454,6 +452,7 @@ exports.Stage = Montage.create(Component, { | |||
454 | 452 | ||
455 | enableMouseInOut: { | 453 | enableMouseInOut: { |
456 | value: function() { | 454 | value: function() { |
455 | document.addEventListener("mouseup", this, true); | ||
457 | this._drawingCanvas.addEventListener("mouseout", this, false); | 456 | this._drawingCanvas.addEventListener("mouseout", this, false); |
458 | this._drawingCanvas.addEventListener("mouseover", this, false); | 457 | this._drawingCanvas.addEventListener("mouseover", this, false); |
459 | } | 458 | } |
@@ -466,6 +465,19 @@ exports.Stage = Montage.create(Component, { | |||
466 | } | 465 | } |
467 | }, | 466 | }, |
468 | 467 | ||
468 | captureMouseup: { | ||
469 | value: function(event) { | ||
470 | var target = event._event.target.getAttribute("data-montage-id"); | ||
471 | |||
472 | if(target && target === "drawingCanvas") { | ||
473 | return true; | ||
474 | } else { | ||
475 | this.handleAppMouseUp(event); | ||
476 | return true; | ||
477 | } | ||
478 | } | ||
479 | }, | ||
480 | |||
469 | handleMouseout: { | 481 | handleMouseout: { |
470 | value: function(event) { | 482 | value: function(event) { |
471 | this.outFlag = true; | 483 | this.outFlag = true; |
@@ -480,6 +492,11 @@ exports.Stage = Montage.create(Component, { | |||
480 | 492 | ||
481 | handleMousedown: { | 493 | handleMousedown: { |
482 | value: function(event) { | 494 | value: function(event) { |
495 | |||
496 | // Increase the canvas to cover the scroll bars | ||
497 | this._drawingCanvas.height = this._drawingCanvas.height + 11; | ||
498 | this._drawingCanvas.width = this._drawingCanvas.width + 11; | ||
499 | |||
483 | // Call the focus manager to set focus to blur any focus'd elements | 500 | // Call the focus manager to set focus to blur any focus'd elements |
484 | this.focusManager.setFocus(); | 501 | this.focusManager.setFocus(); |
485 | 502 | ||
@@ -509,13 +526,18 @@ exports.Stage = Montage.create(Component, { | |||
509 | 526 | ||
510 | handleMouseup: { | 527 | handleMouseup: { |
511 | value: function(event) { | 528 | value: function(event) { |
529 | // Restore canvas to un-cover the scroll bars. | ||
530 | this._drawingCanvas.height = this._drawingCanvas.height - 11; | ||
531 | this._drawingCanvas.width = this._drawingCanvas.width - 11; | ||
512 | // If the mouse up comes from dismissing the context menu return | 532 | // If the mouse up comes from dismissing the context menu return |
533 | |||
513 | if(this.contextMenu) { | 534 | if(this.contextMenu) { |
514 | this.contextMenu = false; | 535 | this.contextMenu = false; |
515 | return; | 536 | return; |
516 | } | 537 | } |
517 | 538 | ||
518 | //this.disableMouseInOut(); | 539 | this.disableMouseInOut(); |
540 | document.removeEventListener("mouseup", this, true); | ||
519 | 541 | ||
520 | this.application.ninja.toolsData.selectedToolInstance.HandleLeftButtonUp(event); | 542 | this.application.ninja.toolsData.selectedToolInstance.HandleLeftButtonUp(event); |
521 | 543 | ||
@@ -563,12 +585,17 @@ exports.Stage = Montage.create(Component, { | |||
563 | handleAppMouseUp: { | 585 | handleAppMouseUp: { |
564 | value: function(event) { | 586 | value: function(event) { |
565 | if(this.outFlag) { | 587 | if(this.outFlag) { |
588 | this._drawingCanvas.height = this._drawingCanvas.height - 11; | ||
589 | this._drawingCanvas.width = this._drawingCanvas.width - 11; | ||
590 | |||
566 | if(this.application.ninja.toolsData.selectedToolInstance.isDrawing) { | 591 | if(this.application.ninja.toolsData.selectedToolInstance.isDrawing) { |
567 | this.application.ninja.toolsData.selectedToolInstance.HandleLeftButtonUp(event); | 592 | this.application.ninja.toolsData.selectedToolInstance.HandleLeftButtonUp(event); |
568 | } | 593 | } |
569 | this.disableMouseInOut(); | 594 | this.disableMouseInOut(); |
570 | this.outFlag = false; | 595 | this.outFlag = false; |
571 | } | 596 | } |
597 | |||
598 | document.removeEventListener("mouseup", this, true); | ||
572 | } | 599 | } |
573 | }, | 600 | }, |
574 | 601 | ||