mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-08 05:42:07 -05:00
Commit beginning of item based mouse events. So far only onMousedown / 'mousedown' is supported.
This commit is contained in:
parent
18d44689fa
commit
e4586cfeeb
6 changed files with 132 additions and 9 deletions
|
@ -32,7 +32,7 @@ var Callback = {
|
||||||
// See if this is the first handler that we're attaching, and
|
// See if this is the first handler that we're attaching, and
|
||||||
// call install if defined.
|
// call install if defined.
|
||||||
if (entry.install && handlers.length == 1)
|
if (entry.install && handlers.length == 1)
|
||||||
entry.install.call(this);
|
entry.install.call(this, type);
|
||||||
}
|
}
|
||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
|
@ -53,7 +53,7 @@ var Callback = {
|
||||||
if (!func || (index = handlers.indexOf(func)) != -1
|
if (!func || (index = handlers.indexOf(func)) != -1
|
||||||
&& handlers.length == 1) {
|
&& handlers.length == 1) {
|
||||||
if (entry.uninstall)
|
if (entry.uninstall)
|
||||||
entry.uninstall.call(this);
|
entry.uninstall.call(this, type);
|
||||||
delete this._handlers[type];
|
delete this._handlers[type];
|
||||||
} else if (index != -1) {
|
} else if (index != -1) {
|
||||||
// Just remove this one handler
|
// Just remove this one handler
|
||||||
|
|
|
@ -26,13 +26,58 @@
|
||||||
*/
|
*/
|
||||||
var Item = this.Item = Base.extend(Callback, /** @lends Item# */{
|
var Item = this.Item = Base.extend(Callback, /** @lends Item# */{
|
||||||
_events: new function() {
|
_events: new function() {
|
||||||
|
|
||||||
|
// Flags defining which native events are required by which Paper events
|
||||||
|
// as required for counting amount of necessary natives events.
|
||||||
|
// The mapping is native -> virtual
|
||||||
|
var mouseFlags = {
|
||||||
|
mousedown: {
|
||||||
|
mousedown: 1,
|
||||||
|
mousedrag: 1,
|
||||||
|
click: 1,
|
||||||
|
doubleclick: 1
|
||||||
|
},
|
||||||
|
mouseup: {
|
||||||
|
mouseup: 1,
|
||||||
|
mousedrag: 1,
|
||||||
|
click: 1,
|
||||||
|
doubleclick: 1
|
||||||
|
},
|
||||||
|
mousemove: {
|
||||||
|
mousedrag: 1,
|
||||||
|
mousemove: 1,
|
||||||
|
mouseenter: 1,
|
||||||
|
mouseleave: 1
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Entry for all mouse events in the _events list
|
||||||
|
var mouseEvent = {
|
||||||
|
install: function(type) {
|
||||||
|
var counters = this._project.view._eventCounters;
|
||||||
|
for (var key in mouseFlags) {
|
||||||
|
counters[key] = (counters[key] || 0)
|
||||||
|
+ (mouseFlags[key][type] || 0);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
uninstall: function(type) {
|
||||||
|
var counters = this._project.view._eventCounters;
|
||||||
|
for (var key in mouseFlags)
|
||||||
|
counters[key] -= mouseFlags[key][type] || 0;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
var onFrameItems = [];
|
var onFrameItems = [];
|
||||||
function onFrame(event) {
|
function onFrame(event) {
|
||||||
for (var i = 0, l = onFrameItems.length; i < l; i++)
|
for (var i = 0, l = onFrameItems.length; i < l; i++)
|
||||||
onFrameItems[i].fire('frame', event);
|
onFrameItems[i].fire('frame', event);
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return Base.each(['onMouseDown', 'onMouseUp', 'onMouseDrag', 'onClick',
|
||||||
|
'onDoubleClick', 'onMouseMove', 'onMouseEnter', 'onMouseLeave'],
|
||||||
|
function(name) {
|
||||||
|
this[name] = mouseEvent;
|
||||||
|
}, {
|
||||||
onFrame: {
|
onFrame: {
|
||||||
install: function() {
|
install: function() {
|
||||||
if (!onFrameItems.length)
|
if (!onFrameItems.length)
|
||||||
|
@ -45,7 +90,7 @@ var Item = this.Item = Base.extend(Callback, /** @lends Item# */{
|
||||||
this._project.view.detach('frame', onFrame);
|
this._project.view.detach('frame', onFrame);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
initialize: function() {
|
initialize: function() {
|
||||||
|
|
|
@ -114,6 +114,7 @@ var paper = new function() {
|
||||||
/*#*/ include('ui/Event.js');
|
/*#*/ include('ui/Event.js');
|
||||||
/*#*/ include('ui/KeyEvent.js');
|
/*#*/ include('ui/KeyEvent.js');
|
||||||
/*#*/ include('ui/Key.js');
|
/*#*/ include('ui/Key.js');
|
||||||
|
/*#*/ include('ui/MouseEvent.js');
|
||||||
|
|
||||||
/*#*/ include('tool/ToolEvent.js');
|
/*#*/ include('tool/ToolEvent.js');
|
||||||
/*#*/ include('tool/Tool.js');
|
/*#*/ include('tool/Tool.js');
|
||||||
|
|
|
@ -25,15 +25,19 @@ var Event = this.Event = Base.extend(/** @lends Event# */{
|
||||||
|
|
||||||
// PORT: Add to Scriptographer
|
// PORT: Add to Scriptographer
|
||||||
preventDefault: function() {
|
preventDefault: function() {
|
||||||
|
this._prevented = true;
|
||||||
DomEvent.preventDefault(this.event);
|
DomEvent.preventDefault(this.event);
|
||||||
|
return this;
|
||||||
},
|
},
|
||||||
|
|
||||||
stopPropagation: function() {
|
stopPropagation: function() {
|
||||||
|
this._stopped = true;
|
||||||
DomEvent.stopPropagation(this.event);
|
DomEvent.stopPropagation(this.event);
|
||||||
|
return this;
|
||||||
},
|
},
|
||||||
|
|
||||||
stop: function() {
|
stop: function() {
|
||||||
DomEvent.stop(this.event);
|
return this.stopPropagation().preventDefault();
|
||||||
},
|
},
|
||||||
|
|
||||||
// DOCS: Document Event#modifiers
|
// DOCS: Document Event#modifiers
|
||||||
|
|
42
src/ui/MouseEvent.js
Normal file
42
src/ui/MouseEvent.js
Normal file
|
@ -0,0 +1,42 @@
|
||||||
|
/*
|
||||||
|
* Paper.js
|
||||||
|
*
|
||||||
|
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
|
||||||
|
* based on Scriptographer.org and designed to be largely API compatible.
|
||||||
|
* http://paperjs.org/
|
||||||
|
* http://scriptographer.org/
|
||||||
|
*
|
||||||
|
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
|
||||||
|
* http://lehni.org/ & http://jonathanpuckey.com/
|
||||||
|
*
|
||||||
|
* Distributed under the MIT license. See LICENSE file for details.
|
||||||
|
*
|
||||||
|
* All rights reserved.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @name MouseEvent
|
||||||
|
*
|
||||||
|
* @extends Event
|
||||||
|
*/
|
||||||
|
var MouseEvent = this.MouseEvent = Event.extend(new function() {
|
||||||
|
return /** @lends MouseEvent# */{
|
||||||
|
initialize: function(type, point, target, event) {
|
||||||
|
this.base(event);
|
||||||
|
this.type = type;
|
||||||
|
this.point = point;
|
||||||
|
this.target = target;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @return {String} A string representation of the key event.
|
||||||
|
*/
|
||||||
|
toString: function() {
|
||||||
|
return '{ type: ' + this.type
|
||||||
|
+ ', point: ' + this.point
|
||||||
|
+ ', target: ' + this.target
|
||||||
|
+ ', modifiers: ' + this.getModifiers()
|
||||||
|
+ ' }';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
|
@ -173,6 +173,7 @@ var View = this.View = Base.extend(Callback, /** @lends View# */{
|
||||||
this._context = this._canvas.getContext('2d');
|
this._context = this._canvas.getContext('2d');
|
||||||
this._matrix = new Matrix();
|
this._matrix = new Matrix();
|
||||||
this._zoom = 1;
|
this._zoom = 1;
|
||||||
|
this._eventCounters = {};
|
||||||
// Make sure the first view is focused for keyboard input straight away
|
// Make sure the first view is focused for keyboard input straight away
|
||||||
if (!View._focused)
|
if (!View._focused)
|
||||||
View._focused = this;
|
View._focused = this;
|
||||||
|
@ -553,6 +554,23 @@ var View = this.View = Base.extend(Callback, /** @lends View# */{
|
||||||
load: updateFocus
|
load: updateFocus
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var hitOptions = {
|
||||||
|
fill: true,
|
||||||
|
stroke: true,
|
||||||
|
tolerance: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
function callEvent(item, event, bubble) {
|
||||||
|
var called = false;
|
||||||
|
while (item) {
|
||||||
|
called = item.fire(event.type, event) || called;
|
||||||
|
if (called && (!bubble || event._stopped))
|
||||||
|
break;
|
||||||
|
item = item.getParent();
|
||||||
|
}
|
||||||
|
return called;
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
_createHandlers: function() {
|
_createHandlers: function() {
|
||||||
var view = this;
|
var view = this;
|
||||||
|
@ -560,12 +578,25 @@ var View = this.View = Base.extend(Callback, /** @lends View# */{
|
||||||
function mousedown(event) {
|
function mousedown(event) {
|
||||||
// Tell the Key class which view should receive keyboard input.
|
// Tell the Key class which view should receive keyboard input.
|
||||||
View._focused = view;
|
View._focused = view;
|
||||||
if (!(tool = view._scope.tool))
|
|
||||||
return;
|
|
||||||
curPoint = viewToProject(view, event);
|
curPoint = viewToProject(view, event);
|
||||||
if (tool.onHandleEvent('mousedown', curPoint, event))
|
|
||||||
view.draw(true);
|
|
||||||
dragging = true;
|
dragging = true;
|
||||||
|
|
||||||
|
var update = false;
|
||||||
|
// TODO: Move this to CanvasView soon!
|
||||||
|
if (view._eventCounters.mousedown) {
|
||||||
|
var hit = view._project.hitTest(curPoint, hitOptions);
|
||||||
|
if (hit && hit.item) {
|
||||||
|
update = callEvent(hit.item, new MouseEvent('mousedown',
|
||||||
|
curPoint, hit.item, event), false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (tool = view._scope.tool)
|
||||||
|
update = tool.onHandleEvent('mousedown', curPoint, event)
|
||||||
|
|| update;
|
||||||
|
|
||||||
|
if (update)
|
||||||
|
view.draw(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
Loading…
Reference in a new issue