Skip to content

Commit cbf9bbd

Browse files
PixelsCommanderPixelsCommander
committed
onzoom, onscroll events were added, DomSceneObject added with corresponding example
1 parent dec7efc commit cbf9bbd

10 files changed

Lines changed: 785 additions & 88 deletions

File tree

‎dist/paper-core.js‎

Lines changed: 133 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
*
1010
* All rights reserved.
1111
*
12-
* Date: Tue Oct 29 21:56:00 2013 +0100
12+
* Date: Tue Oct 29 22:02:29 2013 +0100
1313
*
1414
***
1515
*
@@ -9308,6 +9308,124 @@ var DomElement = new function() {
93089308
};
93099309
};
93109310

9311+
var DomSceneObject = Base.extend(Callback, {
9312+
statics: {
9313+
allDomSceneObjects: [],
9314+
updateCoords: function(){
9315+
for (var i = 0; i < DomSceneObject.allDomSceneObjects.length; i++){
9316+
var newCoords = DomSceneObject.allDomSceneObjects[i].canvasToDom(DomSceneObject.allDomSceneObjects[i].x, DomSceneObject.allDomSceneObjects[i].y);
9317+
DomSceneObject.allDomSceneObjects[i].node.style.left = newCoords.x + 'px';
9318+
DomSceneObject.allDomSceneObjects[i].node.style.top = newCoords.y + 'px';
9319+
}
9320+
}
9321+
},
9322+
9323+
_class: 'DomSceneObject',
9324+
_serializeFields: {
9325+
},
9326+
9327+
initialize: function Item(x, y) {
9328+
if (x instanceof Object === true) {
9329+
y = x.y;
9330+
x = x.x;
9331+
}
9332+
9333+
this._id = Item._id = (Item._id || 0) + 1;
9334+
if (!this._project) {
9335+
var project = paper.project,
9336+
layer = project.activeLayer;
9337+
this._setProject(project);
9338+
}
9339+
9340+
if (DomSceneObject.allDomSceneObjects.length === 0) {
9341+
this._project.view.on('zoom', DomSceneObject.updateCoords);
9342+
this._project.view.on('scroll', DomSceneObject.updateCoords);
9343+
}
9344+
9345+
this.x = x || 0;
9346+
this.y = y || 0;
9347+
9348+
this.node = document.createElement('div');
9349+
this.node.style.position = 'absolute';
9350+
var coord = this.canvasToDom(x, y);
9351+
this.node.style.left = coord.x + 'px';
9352+
this.node.style.top = coord.y + 'px';
9353+
DomSceneObject.allDomSceneObjects.push(this);
9354+
this._project.view._element.parentNode.style.position = 'relative';
9355+
this._project.view._element.parentNode.style.padding = '0';
9356+
this._project.view._element.parentNode.style.margin = '0';
9357+
this._project.view._element.parentNode.appendChild(this.node);
9358+
},
9359+
removeChild: function(node){
9360+
this.node.removeChild(node);
9361+
},
9362+
appendChild: function(node){
9363+
this.node.appendChild(node);
9364+
},
9365+
remove: function(){
9366+
for (var i = 0; i < DomSceneObject.allDomSceneObjects.length; i++){
9367+
if (DomSceneObject.allDomSceneObjects[i] === this){
9368+
DomSceneObject.allDomSceneObjects.splice(i, i + 1);
9369+
}
9370+
}
9371+
this._project.view._element.parentNode.removeChild(this.node);
9372+
if (DomSceneObject.allDomSceneObjects.length === 0) {
9373+
this._project.view.detach('zoom', DomSceneObject.updateCoords);
9374+
this._project.view.detach('fire', DomSceneObject.updateCoords);
9375+
}
9376+
},
9377+
canvasToDom: function(x, y){
9378+
var newX = (this._project.view._matrix._tx + x * this._project.view._matrix._a);
9379+
var newY = (this._project.view._matrix._ty + y * this._project.view._matrix._a);
9380+
9381+
return {x: newX, y: newY};
9382+
},
9383+
set: function(props) {
9384+
if (props)
9385+
this._set(props);
9386+
return this;
9387+
},
9388+
_setProject: function(project) {
9389+
if (this._project != project) {
9390+
this._project = project;
9391+
if (this._children) {
9392+
for (var i = 0, l = this._children.length; i < l; i++) {
9393+
this._children[i]._setProject(project);
9394+
}
9395+
}
9396+
}
9397+
},
9398+
getId: function() {
9399+
return this._id;
9400+
},
9401+
getType: function() {
9402+
return this._type;
9403+
},
9404+
9405+
getName: function() {
9406+
return this._name;
9407+
},
9408+
9409+
setName: function(name, unique) {
9410+
9411+
if (this._name)
9412+
this._removeFromNamed();
9413+
if (name && this._parent) {
9414+
var children = this._parent._children,
9415+
namedChildren = this._parent._namedChildren,
9416+
orig = name,
9417+
i = 1;
9418+
while (unique && children[name])
9419+
name = orig + ' ' + (i++);
9420+
(namedChildren[name] = namedChildren[name] || []).push(this);
9421+
children[name] = this;
9422+
}
9423+
this._name = name || undefined;
9424+
this._changed(32);
9425+
}
9426+
9427+
});
9428+
93119429
var DomEvent = {
93129430
add: function(el, events) {
93139431
for (var type in events) {
@@ -9510,7 +9628,9 @@ var View = Base.extend(Callback, {
95109628
}
95119629
},
95129630

9513-
onResize: {}
9631+
onResize: {},
9632+
onZoom: {},
9633+
onScroll: {}
95149634
},
95159635

95169636
_animate: false,
@@ -9639,19 +9759,21 @@ var View = Base.extend(Callback, {
96399759
return this._zoom;
96409760
},
96419761

9642-
setZoom: function(zoom) {
9643-
this._transform(new Matrix().scale(zoom / this._zoom,
9644-
this.getCenter()));
9645-
this._zoom = zoom;
9646-
},
9762+
setZoom: function(zoom) {
9763+
this._transform(new Matrix().scale(zoom / this._zoom,
9764+
this.getCenter()));
9765+
this._zoom = zoom;
9766+
this.fire('zoom', zoom);
9767+
},
96479768

96489769
isVisible: function() {
96499770
return DomElement.isInView(this._element);
96509771
},
96519772

9652-
scrollBy: function() {
9653-
this._transform(new Matrix().translate(Point.read(arguments).negate()));
9654-
},
9773+
scrollBy: function() {
9774+
this._transform(new Matrix().translate(Point.read(arguments).negate()));
9775+
this.fire('scroll', Point.read(arguments).negate());
9776+
},
96559777

96569778
projectToView: function() {
96579779
return this._matrix._transformPoint(Point.read(arguments));
@@ -10772,7 +10894,6 @@ new function() {
1077210894

1077310895
function exportShape(item) {
1077410896
var shape = item._shape,
10775-
center = item.getPosition(true),
1077610897
radius = item._radius,
1077710898
attrs = getTransform(item, true, shape !== 'rectangle');
1077810899
if (shape === 'rectangle') {
@@ -10827,7 +10948,7 @@ new function() {
1082710948
return createElement('use', attrs);
1082810949
}
1082910950

10830-
function exportGradient(color, item) {
10951+
function exportGradient(color) {
1083110952
var gradientNode = getDefinition(color, 'color');
1083210953
if (!gradientNode) {
1083310954
var gradient = color.getGradient(),

‎dist/paper-core.min.js‎

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/paper-full.js‎

Lines changed: 133 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
*
1010
* All rights reserved.
1111
*
12-
* Date: Tue Oct 29 21:56:00 2013 +0100
12+
* Date: Tue Oct 29 22:02:29 2013 +0100
1313
*
1414
***
1515
*
@@ -9308,6 +9308,124 @@ var DomElement = new function() {
93089308
};
93099309
};
93109310

9311+
var DomSceneObject = Base.extend(Callback, {
9312+
statics: {
9313+
allDomSceneObjects: [],
9314+
updateCoords: function(){
9315+
for (var i = 0; i < DomSceneObject.allDomSceneObjects.length; i++){
9316+
var newCoords = DomSceneObject.allDomSceneObjects[i].canvasToDom(DomSceneObject.allDomSceneObjects[i].x, DomSceneObject.allDomSceneObjects[i].y);
9317+
DomSceneObject.allDomSceneObjects[i].node.style.left = newCoords.x + 'px';
9318+
DomSceneObject.allDomSceneObjects[i].node.style.top = newCoords.y + 'px';
9319+
}
9320+
}
9321+
},
9322+
9323+
_class: 'DomSceneObject',
9324+
_serializeFields: {
9325+
},
9326+
9327+
initialize: function Item(x, y) {
9328+
if (x instanceof Object === true) {
9329+
y = x.y;
9330+
x = x.x;
9331+
}
9332+
9333+
this._id = Item._id = (Item._id || 0) + 1;
9334+
if (!this._project) {
9335+
var project = paper.project,
9336+
layer = project.activeLayer;
9337+
this._setProject(project);
9338+
}
9339+
9340+
if (DomSceneObject.allDomSceneObjects.length === 0) {
9341+
this._project.view.on('zoom', DomSceneObject.updateCoords);
9342+
this._project.view.on('scroll', DomSceneObject.updateCoords);
9343+
}
9344+
9345+
this.x = x || 0;
9346+
this.y = y || 0;
9347+
9348+
this.node = document.createElement('div');
9349+
this.node.style.position = 'absolute';
9350+
var coord = this.canvasToDom(x, y);
9351+
this.node.style.left = coord.x + 'px';
9352+
this.node.style.top = coord.y + 'px';
9353+
DomSceneObject.allDomSceneObjects.push(this);
9354+
this._project.view._element.parentNode.style.position = 'relative';
9355+
this._project.view._element.parentNode.style.padding = '0';
9356+
this._project.view._element.parentNode.style.margin = '0';
9357+
this._project.view._element.parentNode.appendChild(this.node);
9358+
},
9359+
removeChild: function(node){
9360+
this.node.removeChild(node);
9361+
},
9362+
appendChild: function(node){
9363+
this.node.appendChild(node);
9364+
},
9365+
remove: function(){
9366+
for (var i = 0; i < DomSceneObject.allDomSceneObjects.length; i++){
9367+
if (DomSceneObject.allDomSceneObjects[i] === this){
9368+
DomSceneObject.allDomSceneObjects.splice(i, i + 1);
9369+
}
9370+
}
9371+
this._project.view._element.parentNode.removeChild(this.node);
9372+
if (DomSceneObject.allDomSceneObjects.length === 0) {
9373+
this._project.view.detach('zoom', DomSceneObject.updateCoords);
9374+
this._project.view.detach('fire', DomSceneObject.updateCoords);
9375+
}
9376+
},
9377+
canvasToDom: function(x, y){
9378+
var newX = (this._project.view._matrix._tx + x * this._project.view._matrix._a);
9379+
var newY = (this._project.view._matrix._ty + y * this._project.view._matrix._a);
9380+
9381+
return {x: newX, y: newY};
9382+
},
9383+
set: function(props) {
9384+
if (props)
9385+
this._set(props);
9386+
return this;
9387+
},
9388+
_setProject: function(project) {
9389+
if (this._project != project) {
9390+
this._project = project;
9391+
if (this._children) {
9392+
for (var i = 0, l = this._children.length; i < l; i++) {
9393+
this._children[i]._setProject(project);
9394+
}
9395+
}
9396+
}
9397+
},
9398+
getId: function() {
9399+
return this._id;
9400+
},
9401+
getType: function() {
9402+
return this._type;
9403+
},
9404+
9405+
getName: function() {
9406+
return this._name;
9407+
},
9408+
9409+
setName: function(name, unique) {
9410+
9411+
if (this._name)
9412+
this._removeFromNamed();
9413+
if (name && this._parent) {
9414+
var children = this._parent._children,
9415+
namedChildren = this._parent._namedChildren,
9416+
orig = name,
9417+
i = 1;
9418+
while (unique && children[name])
9419+
name = orig + ' ' + (i++);
9420+
(namedChildren[name] = namedChildren[name] || []).push(this);
9421+
children[name] = this;
9422+
}
9423+
this._name = name || undefined;
9424+
this._changed(32);
9425+
}
9426+
9427+
});
9428+
93119429
var DomEvent = {
93129430
add: function(el, events) {
93139431
for (var type in events) {
@@ -9510,7 +9628,9 @@ var View = Base.extend(Callback, {
95109628
}
95119629
},
95129630

9513-
onResize: {}
9631+
onResize: {},
9632+
onZoom: {},
9633+
onScroll: {}
95149634
},
95159635

95169636
_animate: false,
@@ -9639,19 +9759,21 @@ var View = Base.extend(Callback, {
96399759
return this._zoom;
96409760
},
96419761

9642-
setZoom: function(zoom) {
9643-
this._transform(new Matrix().scale(zoom / this._zoom,
9644-
this.getCenter()));
9645-
this._zoom = zoom;
9646-
},
9762+
setZoom: function(zoom) {
9763+
this._transform(new Matrix().scale(zoom / this._zoom,
9764+
this.getCenter()));
9765+
this._zoom = zoom;
9766+
this.fire('zoom', zoom);
9767+
},
96479768

96489769
isVisible: function() {
96499770
return DomElement.isInView(this._element);
96509771
},
96519772

9652-
scrollBy: function() {
9653-
this._transform(new Matrix().translate(Point.read(arguments).negate()));
9654-
},
9773+
scrollBy: function() {
9774+
this._transform(new Matrix().translate(Point.read(arguments).negate()));
9775+
this.fire('scroll', Point.read(arguments).negate());
9776+
},
96559777

96569778
projectToView: function() {
96579779
return this._matrix._transformPoint(Point.read(arguments));
@@ -10990,7 +11112,6 @@ new function() {
1099011112

1099111113
function exportShape(item) {
1099211114
var shape = item._shape,
10993-
center = item.getPosition(true),
1099411115
radius = item._radius,
1099511116
attrs = getTransform(item, true, shape !== 'rectangle');
1099611117
if (shape === 'rectangle') {
@@ -11045,7 +11166,7 @@ new function() {
1104511166
return createElement('use', attrs);
1104611167
}
1104711168

11048-
function exportGradient(color, item) {
11169+
function exportGradient(color) {
1104911170
var gradientNode = getDefinition(color, 'color');
1105011171
if (!gradientNode) {
1105111172
var gradient = color.getGradient(),

‎dist/paper-full.min.js‎

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)