mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-03-13 16:33:28 -04:00
Move event handling from Tool to DocumentView.
This commit is contained in:
Jürg Lehni
parent
f0e8c54008
commit
e8033730c8
2 changed files with 96 additions and 101 deletions
|
|
@ -72,6 +72,8 @@ var DocumentView = this.DocumentView = Base.extend({
|
|||
this._context = this._canvas.getContext('2d');
|
||||
this._matrix = new Matrix();
|
||||
this._zoom = 1;
|
||||
this._events = this._createEvents();
|
||||
DomEvent.add(this._canvas, this._events);
|
||||
},
|
||||
|
||||
getDocument: function() {
|
||||
|
|
@ -133,7 +135,9 @@ var DocumentView = this.DocumentView = Base.extend({
|
|||
|
||||
remove: function() {
|
||||
var res = Base.splice(this._document.views, null, this._index, 1);
|
||||
this._document = null;
|
||||
// Uninstall event handlers again for this view.
|
||||
DomEvent.remove(this._canvas, this._events);
|
||||
this._document = this._canvas = this._events = null;
|
||||
return !!res.length;
|
||||
},
|
||||
|
||||
|
|
@ -156,10 +160,81 @@ var DocumentView = this.DocumentView = Base.extend({
|
|||
// TODO: getMousePoint
|
||||
// TODO: artworkToView(rect)
|
||||
artworkToView: function(point) {
|
||||
return this._matrix._transformPoint(point);
|
||||
return this._matrix._transformPoint(Point.read(arguments));
|
||||
},
|
||||
|
||||
viewToArtwork: function(point) {
|
||||
return this._getInverse()._transformPoint(point);
|
||||
return this._getInverse()._transformPoint(Point.read(arguments));
|
||||
},
|
||||
|
||||
_createEvents: function() {
|
||||
var scope = this._document._scope,
|
||||
tool,
|
||||
curPoint,
|
||||
dragging = false,
|
||||
that = this;
|
||||
|
||||
function viewToArtwork(event) {
|
||||
return that.viewToArtwork(DomEvent.getOffset(event));
|
||||
}
|
||||
|
||||
function mousedown(event) {
|
||||
if (!(tool = scope.tool))
|
||||
return;
|
||||
curPoint = viewToArtwork(event);
|
||||
tool.onHandleEvent('mousedown', curPoint, event);
|
||||
if (tool.onMouseDown)
|
||||
that._document.redraw();
|
||||
if (that.eventInterval != null) {
|
||||
this.timer = setInterval(events.mousemove, that.eventInterval);
|
||||
}
|
||||
dragging = true;
|
||||
}
|
||||
|
||||
function mousemove(event) {
|
||||
if (!(tool = scope.tool))
|
||||
return;
|
||||
// If the event was triggered by a touch screen device, prevent the
|
||||
// default behaviour, as it will otherwise scroll the page:
|
||||
if (event && event.targetTouches)
|
||||
DomEvent.preventDefault(event);
|
||||
var point = event && viewToArtwork(event);
|
||||
var onlyMove = !!(!tool.onMouseDrag && tool.onMouseMove);
|
||||
if (dragging && !onlyMove) {
|
||||
curPoint = point || curPoint;
|
||||
if (curPoint)
|
||||
tool.onHandleEvent('mousedrag', curPoint, event);
|
||||
if (tool.onMouseDrag)
|
||||
that._document.redraw();
|
||||
// PORT: If there is only an onMouseMove handler, also call it when
|
||||
// the user is dragging:
|
||||
} else if (!dragging || onlyMove) {
|
||||
tool.onHandleEvent('mousemove', point, event);
|
||||
if (tool.onMouseMove)
|
||||
that._document.redraw();
|
||||
}
|
||||
}
|
||||
|
||||
function mouseup(event) {
|
||||
if (!dragging || !tool) {
|
||||
dragging = false;
|
||||
return;
|
||||
}
|
||||
curPoint = null;
|
||||
if (that.eventInterval != null)
|
||||
clearInterval(this.timer);
|
||||
tool.onHandleEvent('mouseup', viewToArtwork(event), event);
|
||||
if (tool.onMouseUp)
|
||||
that._document.redraw();
|
||||
}
|
||||
|
||||
return {
|
||||
mousedown: mousedown,
|
||||
mousemove: mousemove,
|
||||
mouseup: mouseup,
|
||||
touchstart: mousedown,
|
||||
touchmove: mousemove,
|
||||
touchend: mouseup
|
||||
};
|
||||
}
|
||||
});
|
||||
|
|
|
|||
116
src/tool/Tool.js
116
src/tool/Tool.js
|
|
@ -14,105 +14,25 @@
|
|||
* All rights reserved.
|
||||
*/
|
||||
|
||||
var Tool = this.Tool = ToolHandler.extend(new function() {
|
||||
function viewToArtwork(event, document) {
|
||||
// TODO: always the active view?
|
||||
return document.activeView.viewToArtwork(DomEvent.getOffset(event));
|
||||
};
|
||||
var Tool = this.Tool = ToolHandler.extend({
|
||||
beans: true,
|
||||
|
||||
return {
|
||||
beans: true,
|
||||
initialize: function(handlers, doc) {
|
||||
this.base(handlers, doc._scope);
|
||||
this._document = doc;
|
||||
},
|
||||
|
||||
initialize: function(handlers, doc) {
|
||||
this.base(handlers, doc._scope);
|
||||
this._document = doc;
|
||||
getDocument: function() {
|
||||
return this._document;
|
||||
},
|
||||
|
||||
var curPoint;
|
||||
var dragging = false;
|
||||
var that = this;
|
||||
// TODO: Move event handling to DocumentView
|
||||
var events = {
|
||||
mousedown: function(event) {
|
||||
curPoint = viewToArtwork(event, that._document);
|
||||
that.onHandleEvent('mousedown', curPoint, event);
|
||||
if (that.onMouseDown) {
|
||||
that._document.redraw();
|
||||
}
|
||||
if (that.eventInterval != null) {
|
||||
this.timer = setInterval(events.mousemove,
|
||||
that.eventInterval);
|
||||
}
|
||||
dragging = true;
|
||||
},
|
||||
|
||||
mousemove: function(event) {
|
||||
// If the event was triggered by a touch screen device,
|
||||
// prevent the default behaviour, as it will otherwise
|
||||
// scroll the page:
|
||||
if (event && event.targetTouches) {
|
||||
DomEvent.preventDefault(event);
|
||||
}
|
||||
var point = event && viewToArtwork(event, that._document);
|
||||
var onlyMove = !!(!that.onMouseDrag && that.onMouseMove);
|
||||
if (dragging && !onlyMove) {
|
||||
curPoint = point || curPoint;
|
||||
if (curPoint) {
|
||||
that.onHandleEvent('mousedrag', curPoint, event);
|
||||
}
|
||||
if (that.onMouseDrag)
|
||||
that._document.redraw();
|
||||
// PORT: If there is only an onMouseMove handler, also
|
||||
// call it when the user is dragging:
|
||||
} else if (!dragging || onlyMove) {
|
||||
that.onHandleEvent('mousemove', point, event);
|
||||
if (that.onMouseMove)
|
||||
that._document.redraw();
|
||||
}
|
||||
},
|
||||
|
||||
mouseup: function(event) {
|
||||
if (dragging) {
|
||||
curPoint = null;
|
||||
if (that.eventInterval != null) {
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
that.onHandleEvent('mouseup',
|
||||
viewToArtwork(event, that._document), event);
|
||||
if (that.onMouseUp) {
|
||||
that._document.redraw();
|
||||
}
|
||||
dragging = false;
|
||||
}
|
||||
},
|
||||
|
||||
touchmove: function(event) {
|
||||
events.mousemove(event);
|
||||
},
|
||||
|
||||
touchstart: function(event) {
|
||||
events.mousedown(event);
|
||||
},
|
||||
|
||||
touchend: function(event) {
|
||||
events.mouseup(event);
|
||||
}
|
||||
};
|
||||
|
||||
DomEvent.add(doc.activeView._canvas, events);
|
||||
},
|
||||
|
||||
getDocument: function() {
|
||||
return this._document;
|
||||
},
|
||||
|
||||
/**
|
||||
* The fixed time delay between each call to the {@link #onMouseDrag}
|
||||
* event. Setting this to an interval means the {@link #onMouseDrag}
|
||||
* event is called repeatedly after the initial {@link #onMouseDown}
|
||||
* until the user releases the mouse.
|
||||
*
|
||||
* @return the interval time in milliseconds
|
||||
*/
|
||||
eventInterval: null
|
||||
};
|
||||
/**
|
||||
* The fixed time delay between each call to the {@link #onMouseDrag}
|
||||
* event. Setting this to an interval means the {@link #onMouseDrag}
|
||||
* event is called repeatedly after the initial {@link #onMouseDown}
|
||||
* until the user releases the mouse.
|
||||
*
|
||||
* @return the interval time in milliseconds
|
||||
*/
|
||||
eventInterval: null
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue