mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-01 02:38:43 -05:00
Make sure mouse events propagate to the view while their targets remain consistent.
Closes #995
This commit is contained in:
Jürg Lehni
parent
93e4d81645
commit
724bcb2e35
2 changed files with 76 additions and 45 deletions
|
|
@ -30,7 +30,7 @@ var MouseEvent = Event.extend(/** @lends MouseEvent# */{
|
|||
this.type = type;
|
||||
this.event = event;
|
||||
this.point = point;
|
||||
this.target = target;
|
||||
this._target = target;
|
||||
this.delta = delta;
|
||||
},
|
||||
|
||||
|
|
@ -56,6 +56,12 @@ var MouseEvent = Event.extend(/** @lends MouseEvent# */{
|
|||
* @name MouseEvent#target
|
||||
* @type Item
|
||||
*/
|
||||
getTarget: function() {
|
||||
var target = this._target;
|
||||
if (typeof target === 'function')
|
||||
target = this._target = target();
|
||||
return target;
|
||||
},
|
||||
|
||||
// DOCS: document MouseEvent#delta
|
||||
/**
|
||||
|
|
@ -69,7 +75,7 @@ var MouseEvent = Event.extend(/** @lends MouseEvent# */{
|
|||
toString: function() {
|
||||
return "{ type: '" + this.type
|
||||
+ "', point: " + this.point
|
||||
+ ', target: ' + this.target
|
||||
+ ', target: ' + this.getTarget()
|
||||
+ (this.delta ? ', delta: ' + this.delta : '')
|
||||
+ ', modifiers: ' + this.getModifiers()
|
||||
+ ' }';
|
||||
|
|
|
|||
111
src/view/View.js
111
src/view/View.js
|
|
@ -1155,9 +1155,9 @@ new function() { // Injection scope for event handling on the browser
|
|||
};
|
||||
|
||||
// Returns true if event was prevented, false otherwise.
|
||||
function emitMouseEvent(obj, type, event, point, prevPoint, stopItem) {
|
||||
var target = obj,
|
||||
stopped = false,
|
||||
function emitMouseEvent(obj, target, type, event, point, prevPoint,
|
||||
stopItem) {
|
||||
var stopped = false,
|
||||
mouseEvent;
|
||||
|
||||
// Returns true if the event was stopped, false otherwise.
|
||||
|
|
@ -1166,7 +1166,8 @@ new function() { // Injection scope for event handling on the browser
|
|||
// Only produce the event object if we really need it, and then
|
||||
// reuse it if we're bubbling.
|
||||
if (!mouseEvent) {
|
||||
mouseEvent = new MouseEvent(type, event, point, target,
|
||||
mouseEvent = new MouseEvent(type, event, point,
|
||||
target || obj,
|
||||
// Calculate delta if prevPoint was passed
|
||||
prevPoint ? point.subtract(prevPoint) : null);
|
||||
}
|
||||
|
|
@ -1195,7 +1196,8 @@ new function() { // Injection scope for event handling on the browser
|
|||
}
|
||||
|
||||
// Returns true if event was stopped, false otherwise.
|
||||
function emitMouseEvents(view, item, type, event, point, prevPoint) {
|
||||
function emitMouseEvents(view, hitItem, hitTest, type, event, point,
|
||||
prevPoint) {
|
||||
// Before handling events, process removeOn() calls for cleanup.
|
||||
// NOTE: As soon as there is one event handler receiving mousedrag
|
||||
// events, non of the removeOnMove() items will be removed while the
|
||||
|
|
@ -1206,17 +1208,21 @@ new function() { // Injection scope for event handling on the browser
|
|||
// and of the handlers called event.preventDefault()
|
||||
prevented = called = false;
|
||||
// First handle the drag-item and its parents, through bubbling.
|
||||
return (dragItem && emitMouseEvent(dragItem, type, event, point,
|
||||
prevPoint)
|
||||
// Next handle the hit-test item, if it's different from the drag
|
||||
// item and not a descendant of it (in which case it would already
|
||||
// have received an event in the call above). Use fallbacks to
|
||||
// translate mousedrag to mousemove, since drag is handled above.
|
||||
|| item && item !== dragItem && !item.isDescendant(dragItem)
|
||||
&& emitMouseEvent(item, fallbacks[type] || type, event, point,
|
||||
prevPoint, dragItem)
|
||||
return (dragItem && emitMouseEvent(dragItem, null, type, event,
|
||||
point, prevPoint)
|
||||
// Next handle the hit-item, if it's different from the drag-item
|
||||
// and not a descendant of it (in which case it would already have
|
||||
// received an event in the call above). Use fallbacks to translate
|
||||
// mousedrag to mousemove, since drag is handled above.
|
||||
|| hitItem && hitItem !== dragItem
|
||||
&& !hitItem.isDescendant(dragItem)
|
||||
&& emitMouseEvent(hitItem, null, fallbacks[type] || type, event,
|
||||
point, prevPoint, dragItem)
|
||||
// Lastly handle the mouse events on the view, if we're still here.
|
||||
|| emitMouseEvent(view, type, event, point, prevPoint));
|
||||
// Choose from the potential targets in the right sequence, with the
|
||||
// hitTest() function as the fall-back getter for MouseEvent#target.
|
||||
|| emitMouseEvent(view, dragItem || hitItem || hitTest, type, event,
|
||||
point, prevPoint));
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -1293,12 +1299,7 @@ new function() { // Injection scope for event handling on the browser
|
|||
// Run the hit-test on items first, but only if we're required to do
|
||||
// so for this given mouse event, see hitItems, #_countItemEvent():
|
||||
var inView = this.getBounds().contains(point),
|
||||
hit = hitItems && inView && this._project.hitTest(point, {
|
||||
tolerance: 0,
|
||||
fill: true,
|
||||
stroke: true
|
||||
}),
|
||||
item = hit && hit.item || null,
|
||||
hitItem = undefined,
|
||||
// Keep track if view event should be handled, so we can use it
|
||||
// to decide if tool._handleMouseEvent() shall be called after.
|
||||
handle = false,
|
||||
|
|
@ -1307,34 +1308,56 @@ new function() { // Injection scope for event handling on the browser
|
|||
// mouse event types.
|
||||
mouse[type.substr(5)] = true;
|
||||
|
||||
// Always first call the view's mouse handlers, as required by
|
||||
// CanvasView, and then handle the active tool after, if any.
|
||||
if (hitItems && item !== overItem) {
|
||||
// But first handle mouseenter / leave between items and also on
|
||||
// the view, but only if hitItems is true, see above.
|
||||
// Provide a hit-test function that makes sure to only perform the
|
||||
// hit-test once, and only when it's actually required. This method
|
||||
// is passed to emitMouseEvents() and as target to emitMouseEvent(),
|
||||
// as the fall-back getter for MouseEvent#target.
|
||||
function hitTest() {
|
||||
//
|
||||
if (hitItem === undefined) {
|
||||
var hit = inView && view._project.hitTest(point, {
|
||||
tolerance: 0,
|
||||
fill: true,
|
||||
stroke: true
|
||||
});
|
||||
hitItem = hit && hit.item || null;
|
||||
}
|
||||
// Return the target with view as the fall-back, as expected by
|
||||
// MouseEvent#target.
|
||||
return hitItem || view;
|
||||
}
|
||||
|
||||
// Execute hitTest right away if we have events relying on hitItem.
|
||||
if (hitItems)
|
||||
hitTest();
|
||||
// Handle mouseenter / leave between items and views first.
|
||||
if (hitItems && hitItem !== overItem) {
|
||||
if (overItem) {
|
||||
emitMouseEvent(overItem, 'mouseleave', event, point);
|
||||
emitMouseEvent(overItem, null, 'mouseleave', event, point);
|
||||
}
|
||||
if (item) {
|
||||
emitMouseEvent(item, 'mouseenter', event, point);
|
||||
if (hitItem) {
|
||||
emitMouseEvent(hitItem, null, 'mouseenter', event, point);
|
||||
}
|
||||
overItem = item;
|
||||
overItem = hitItem;
|
||||
}
|
||||
// Handle mouseenter / leave on the view.
|
||||
if (wasInView ^ inView) {
|
||||
emitMouseEvent(this, inView ? 'mouseenter' : 'mouseleave',
|
||||
emitMouseEvent(this, null, inView ? 'mouseenter' : 'mouseleave',
|
||||
event, point);
|
||||
overView = inView ? this : null;
|
||||
handle = true; // To include the leaving move.
|
||||
}
|
||||
// Now finally handle the mousemove / mousedrag event.
|
||||
// Now handle the mousemove / mousedrag event.
|
||||
// Always call the view's mouse handlers first, as required by
|
||||
// CanvasView, and then handle the active tool after, if any.
|
||||
// mousedrag is allowed to leave the view and still triggers events,
|
||||
// but do not trigger two subsequent even with the same location.
|
||||
if ((inView || mouse.drag) && !point.equals(lastPoint)) {
|
||||
// Handle mousemove even if this is not actually a mousemove
|
||||
// event but the mouse has moved since the last event.
|
||||
emitMouseEvents(this, item, nativeMove ? type : 'mousemove',
|
||||
event, point, lastPoint);
|
||||
emitMouseEvents(this, hitItem, hitTest,
|
||||
nativeMove ? type : 'mousemove', event,
|
||||
point, lastPoint);
|
||||
handle = true;
|
||||
}
|
||||
wasInView = inView;
|
||||
|
|
@ -1342,25 +1365,27 @@ new function() { // Injection scope for event handling on the browser
|
|||
// We emit mousedown only when in the view, and mouseup regardless,
|
||||
// as long as the mousedown event was inside.
|
||||
if (mouse.down && inView || mouse.up && downPoint) {
|
||||
emitMouseEvents(this, item, type, event, point, downPoint);
|
||||
emitMouseEvents(this, hitItem, hitTest, type, event,
|
||||
point, downPoint);
|
||||
if (mouse.down) {
|
||||
// See if we're clicking again on the same item, within the
|
||||
// double-click time. Firefox uses 300ms as the max time
|
||||
// difference:
|
||||
dblClick = item === clickItem
|
||||
dblClick = hitItem === clickItem
|
||||
&& (Date.now() - clickTime < 300);
|
||||
downItem = clickItem = item;
|
||||
downItem = clickItem = hitItem;
|
||||
// Only start dragging if the mousedown event has not
|
||||
// prevented the default.
|
||||
dragItem = !prevented && item;
|
||||
dragItem = !prevented && hitItem;
|
||||
downPoint = point;
|
||||
} else if (mouse.up) {
|
||||
// Emulate click / doubleclick, but only on item, not view
|
||||
if (!prevented && item === downItem) {
|
||||
// Emulate click / doubleclick, but only on the hit-item,
|
||||
// not the view.
|
||||
if (!prevented && hitItem === downItem) {
|
||||
clickTime = Date.now();
|
||||
emitMouseEvents(this, item,
|
||||
dblClick ? 'doubleclick' : 'click',
|
||||
event, point, downPoint);
|
||||
emitMouseEvents(this, hitItem, hitTest,
|
||||
dblClick ? 'doubleclick' : 'click', event,
|
||||
point, downPoint);
|
||||
dblClick = false;
|
||||
}
|
||||
downItem = dragItem = null;
|
||||
|
|
|
|||
Loading…
Reference in a new issue