diff --git a/examples/Animated/animatedStar.html b/examples/Animated/animatedStar.html
index 82bc5c5c..79c4ce4b 100644
--- a/examples/Animated/animatedStar.html
+++ b/examples/Animated/animatedStar.html
@@ -5,6 +5,7 @@
Example
+
@@ -42,7 +43,6 @@
path.add(newPoint);
}
path.smooth();
- doc.activeLayer.appendTop(path);
}
doc.activeLayer.children.reverse();
doc.redraw();
diff --git a/examples/Scripts/arcTo.html b/examples/Scripts/arcTo.html
index e4e0d9b4..4ca54a80 100644
--- a/examples/Scripts/arcTo.html
+++ b/examples/Scripts/arcTo.html
@@ -5,6 +5,7 @@
Example
+
@@ -36,10 +37,8 @@
path.arcTo(point.add(vector), true);
}
}
- doc.activeLayer.appendTop(path);
+ doc.activeLayer.appendBottom(path);
}
- doc.activeLayer.children.reverse();
-
doc.redraw();
}
diff --git a/examples/Scripts/circle.html b/examples/Scripts/circle.html
index ec1655e5..11d212f0 100644
--- a/examples/Scripts/circle.html
+++ b/examples/Scripts/circle.html
@@ -5,6 +5,7 @@
Example
+
@@ -26,7 +27,6 @@
for(var i = 0; i < 70; i++) {
var path = new Path.Circle(center, i * 5);
path.strokeColor = 'black';
- doc.activeLayer.appendTop(path);
}
doc.redraw();
}
diff --git a/examples/Scripts/letter.html b/examples/Scripts/letter.html
index 79d1d835..a9a411d8 100644
--- a/examples/Scripts/letter.html
+++ b/examples/Scripts/letter.html
@@ -5,6 +5,7 @@
Example
+
@@ -38,7 +39,6 @@
new Segment(new Point(56.984375, 286.0546875), new Point(10.03076171875, 6.6875))
);
letterPath.fillColor = 'black';
- doc.activeLayer.appendTop(letterPath);
doc.redraw();
}
diff --git a/examples/Scripts/lines.html b/examples/Scripts/lines.html
index 32ab7e98..965cc5e4 100644
--- a/examples/Scripts/lines.html
+++ b/examples/Scripts/lines.html
@@ -5,6 +5,7 @@
Example
+
@@ -33,7 +34,6 @@
for(var i = 0; i < 180; i++) {
var path = new Path.Line(point.add(vector.rotate(i * 2).normalize(30)), point.add(vector.rotate(i * 2).normalize(30 + Math.abs(Math.sin((i + count / 20)) * 300))));
path.strokeColor = i % 4 ? 'black' : 'red';
- doc.activeLayer.appendTop(path);
}
doc.redraw();
}
diff --git a/examples/Scripts/rectangle.html b/examples/Scripts/rectangle.html
index 95707d4d..1f32c970 100644
--- a/examples/Scripts/rectangle.html
+++ b/examples/Scripts/rectangle.html
@@ -5,6 +5,7 @@
Example
+
@@ -24,8 +25,6 @@
doc = new Doc(canvas);
var path = new Path.Rectangle([50, 50], [100, 100]);
path.strokeColor = 'black';
- console.log(path);
- doc.activeLayer.appendTop(path);
doc.redraw();
}
diff --git a/examples/Scripts/roundRectangle.html b/examples/Scripts/roundRectangle.html
index 0f555d71..27eb824e 100644
--- a/examples/Scripts/roundRectangle.html
+++ b/examples/Scripts/roundRectangle.html
@@ -5,6 +5,7 @@
Example
+
@@ -31,7 +32,6 @@
var size = Math.abs(Math.sin(count / 40)) * 150 + 10;
var path = new Path.RoundRectangle(rect, size);
path.fillColor = 'black';
- doc.activeLayer.appendTop(path);
doc.redraw();
}
diff --git a/examples/Scripts/star.html b/examples/Scripts/star.html
index 48ba213b..67913de5 100644
--- a/examples/Scripts/star.html
+++ b/examples/Scripts/star.html
@@ -5,6 +5,7 @@
Example
+
@@ -35,9 +36,8 @@
path.add(newPoint);
}
path.smooth();
- doc.activeLayer.appendTop(path);
+ doc.activeLayer.appendBottom(path);
}
- doc.activeLayer.children.reverse();
doc.redraw();
}
diff --git a/examples/Scripts/strokeJoin.html b/examples/Scripts/strokeJoin.html
index 88d1e20b..9787e63e 100644
--- a/examples/Scripts/strokeJoin.html
+++ b/examples/Scripts/strokeJoin.html
@@ -5,6 +5,7 @@
Example
+
@@ -25,8 +26,36 @@
var path = new Path([100, 150], [150, 200], [200, 150]);
path.strokeColor = 'black';
path.strokeWidth = 30;
+ path.strokeJoin = 'round';
+
+ var path = new Path([240, 150], [290, 200], [340, 150]);
+ path.strokeColor = 'black';
+ path.strokeWidth = 30;
path.strokeJoin = 'bevel';
- doc.activeLayer.appendTop(path);
+
+ var path = new Path([380, 150], [430, 200], [480, 150]);
+ path.strokeColor = 'black';
+ path.strokeWidth = 30;
+ path.strokeJoin = 'miter';
+
+ var path = new Path([100, 250], [150, 300], [200, 250]);
+ path.strokeColor = 'black';
+ path.strokeWidth = 30;
+ path.strokeJoin = 'round';
+ path.strokeCap = 'round';
+
+ var path = new Path([240, 250], [290, 300], [340, 250]);
+ path.strokeColor = 'black';
+ path.strokeWidth = 30;
+ path.strokeJoin = 'bevel';
+ path.strokeCap = 'square';
+
+ var path = new Path([380, 250], [430, 300], [480, 250]);
+ path.strokeColor = 'black';
+ path.strokeWidth = 30;
+ path.strokeJoin = 'miter';
+ path.strokeCap = 'butt';
+
doc.redraw();
}
diff --git a/examples/Tools/Circles.html b/examples/Tools/Circles.html
index 085cb83e..7b7bc937 100644
--- a/examples/Tools/Circles.html
+++ b/examples/Tools/Circles.html
@@ -5,6 +5,7 @@
Example
+
@@ -23,16 +24,14 @@
window.onload = function() {
var canvas = document.getElementById('canvas');
var doc = new Doc(canvas);
-
+ var path;
var tool = new Tool({
onMouseDrag: function(event) {
- if(event.count != 1)
- doc.activeLayer.children.pop();
+ if(path) path.remove();
var distance = event.downPoint.subtract(event.point).length;
- var path = new Path.Circle(event.downPoint, distance);
+ path = new Path.Circle(event.downPoint, distance);
path.strokeColor = 'black';
path.fillColor = 'white';
- doc.activeLayer.appendTop(path);
}
});
tool.document = doc;
diff --git a/examples/Tools/Clouds.html b/examples/Tools/Clouds.html
index 6a6bf70b..0dc21ff2 100644
--- a/examples/Tools/Clouds.html
+++ b/examples/Tools/Clouds.html
@@ -5,6 +5,7 @@
Example
+
@@ -32,7 +33,6 @@
path.strokeJoin = 'round';
path.strokeCap = 'round';
path.add(event.point);
- doc.activeLayer.appendTop(path);
},
onMouseDrag: function(event) {
path.arcTo(event.point, true);
diff --git a/examples/Tools/Dripping Brush.html b/examples/Tools/Dripping Brush.html
index 1877933e..6e519c25 100644
--- a/examples/Tools/Dripping Brush.html
+++ b/examples/Tools/Dripping Brush.html
@@ -5,6 +5,7 @@
Example
+
@@ -28,10 +29,6 @@
var minSize = 5;
var tool = new Tool({
- onMouseDown: function(event) {
-
- },
-
onMouseDrag: function(event) {
// If the user dragged more then minSize:
if (event.delta.length > minSize) {
@@ -40,7 +37,6 @@
path = new Path();
path.fillColor = 'black';
path.add(event.lastPoint);
- doc.activeLayer.appendTop(path);
}
var step = event.delta.divide(2);
diff --git a/examples/Tools/Fancy Brush.html b/examples/Tools/Fancy Brush.html
index cb5391eb..41d28713 100644
--- a/examples/Tools/Fancy Brush.html
+++ b/examples/Tools/Fancy Brush.html
@@ -5,6 +5,7 @@
Example
+
@@ -36,7 +37,6 @@
onMouseDown: function(event) {
path = new Path();
path.fillColor = event.count % 2 ? 'red' : 'black';
- doc.activeLayer.appendTop(path);
},
onMouseDrag: function(event) {
diff --git a/examples/Tools/Grid.html b/examples/Tools/Grid.html
index 0af4981f..4549a0ae 100644
--- a/examples/Tools/Grid.html
+++ b/examples/Tools/Grid.html
@@ -5,6 +5,7 @@
Example
+
@@ -39,7 +40,6 @@
path = new Path();
path.strokeColor = 'black';
path.add(point);
- doc.activeLayer.appendTop(path);
},
onMouseDrag: function(event) {
var p = getPos(event.point);
diff --git a/examples/Tools/MultiLines.html b/examples/Tools/MultiLines.html
index 461ba205..a2b1574e 100644
--- a/examples/Tools/MultiLines.html
+++ b/examples/Tools/MultiLines.html
@@ -5,6 +5,7 @@
Example
+
@@ -37,7 +38,6 @@
for (var i = 0; i < values.lines; i++) {
var path = new Path();
path.strokeColor = '#000000';
- doc.activeLayer.appendTop(path);
paths.push(path);
}
},
@@ -50,7 +50,6 @@
var path = paths[values.lines - 1 - i];
offset.length = lineSize * i + lineSize / 2;
path.add(event.middlePoint.add(offset));
- //path.insert(0, event.middlePoint.subtract(offset));
path.smooth();
}
}
diff --git a/examples/Tools/Wave.html b/examples/Tools/Wave.html
index 5900d63f..1d012adf 100644
--- a/examples/Tools/Wave.html
+++ b/examples/Tools/Wave.html
@@ -5,6 +5,7 @@
Example
+
@@ -23,7 +24,6 @@
window.onload = function() {
var canvas = document.getElementById('canvas');
var doc = new Doc(canvas);
-
var values = {
curviness: 0.5,
distance: 10,
@@ -37,12 +37,10 @@
onMouseDown: function(event) {
path = new Path();
path.strokeColor = 'black';
- doc.activeLayer.appendTop(path);
},
onMouseDrag: function(event) {
var step = event.delta.rotate(90 * mul);
-
if (!values.mouseOffset)
step.length = values.offset;
var segment = new Segment(event.point.add(step));
diff --git a/examples/Tools/Worm Farm.html b/examples/Tools/Worm Farm.html
index b6da0c7c..b332538d 100644
--- a/examples/Tools/Worm Farm.html
+++ b/examples/Tools/Worm Farm.html
@@ -5,6 +5,7 @@
Example
+
@@ -40,7 +41,6 @@
worm.fillColor = '#ffffff';
worm.strokeColor = '#000000';
worm.add(event.point);
- doc.activeLayer.appendTop(worm);
},
onMouseDrag: function(event) {
@@ -77,7 +77,6 @@
// make a new line path from top to bottom
var line = new Path.Line(top, bottom);
line.strokeColor = '#000000';
- doc.activeLayer.appendTop(line);
// smooth the segments of the path
worm.smooth();
diff --git a/src/Doc.js b/src/Doc.js
index 51695513..6978a084 100644
--- a/src/Doc.js
+++ b/src/Doc.js
@@ -5,9 +5,16 @@ Doc = Base.extend({
this.ctx = this.canvas.getContext('2d');
this.size = new Size(canvas.offsetWidth, canvas.offsetHeight);
}
+ Paper.documents.push(this);
+ this.activate();
+ this.layers = [];
this.activeLayer = new Layer();
- this.layers = [this.activeLayer];
},
+
+ activate: function() {
+ Paper.activateDocument(this);
+ },
+
redraw: function() {
if(this.canvas) {
this.ctx.clearRect(0, 0, this.size.width, this.size.height);
diff --git a/src/Item.js b/src/Item.js
index 9cbdac63..87e16c02 100644
--- a/src/Item.js
+++ b/src/Item.js
@@ -1,7 +1,8 @@
Item = Base.extend({
beans: true,
initialize: function() {
-
+ this.parent = Paper.document.activeLayer;
+ this.parent.children.push(this);
},
/**
@@ -154,6 +155,13 @@ Item = Base.extend({
this.parent.children.splice(this.index, 1);
},
+ /**
+ * Removes the item.
+ */
+ remove: function() {
+ this.removeFromParent();
+ },
+
/**
* {@grouptitle Hierarchy Operations}
*
@@ -172,8 +180,10 @@ Item = Base.extend({
* @param item The item that will be appended as a child
*/
appendTop: function(item) {
+ item.removeFromParent();
this.children.push(item);
item.parent = this;
+ item.document = this.document;
},
/**
@@ -192,8 +202,10 @@ Item = Base.extend({
* @param item The item that will be appended as a child
*/
appendBottom: function(item) {
+ item.removeFromParent();
this.children.splice(0, 0, item);
item.parent = this;
+ item.document = this.document;
},
/**
@@ -225,6 +237,7 @@ Item = Base.extend({
this.removeFromParent();
item.parent.children.splice(item.index + 1, 0, this);
this.parent = item.parent;
+ this.document = item.document;
return true;
},
@@ -248,6 +261,7 @@ Item = Base.extend({
this.removeFromParent();
item.parent.children.splice(item.index - 1, 0, this);
this.parent = item.parent;
+ this.document = item.document;
return true;
},
diff --git a/src/Layer.js b/src/Layer.js
index 9fc6e930..fab5e80d 100644
--- a/src/Layer.js
+++ b/src/Layer.js
@@ -1,7 +1,13 @@
Layer = Item.extend({
initialize: function() {
- this.base();
this.children = [];
+ this.document = this.parent = Paper.document;
+ this.document.layers.push(this);
+ this.activate();
+ },
+
+ activate: function() {
+ this.document.activeLayer = this;
},
draw: function(ctx) {
diff --git a/src/Paper.js b/src/Paper.js
new file mode 100644
index 00000000..ad2452a7
--- /dev/null
+++ b/src/Paper.js
@@ -0,0 +1,10 @@
+Paper = Base.extend({
+ statics: {
+ documents: [],
+ activateDocument: function(doc) {
+ var index = this.documents.indexOf(doc);
+ if(index != -1)
+ this.document = this.documents[index];
+ }
+ }
+});
\ No newline at end of file
diff --git a/test/index.html b/test/index.html
index 0e3f4863..94046568 100644
--- a/test/index.html
+++ b/test/index.html
@@ -5,6 +5,7 @@
+
diff --git a/test/tests_item.js b/test/tests_item.js
index 4d0db0de..72ac75d5 100644
--- a/test/tests_item.js
+++ b/test/tests_item.js
@@ -3,8 +3,8 @@ module('Item');
test('appendChild(item)', function() {
var doc = new Doc();
var path = new Path();
- // doc.activeLayer.appendChild(path);
- // equals(doc.activeLayer.children.length, 1);
+ doc.activeLayer.appendChild(path);
+ equals(doc.activeLayer.children.length, 1);
});
test('item.parent / item.isChild', function() {
@@ -16,7 +16,7 @@ test('item.parent / item.isChild', function() {
secondDoc.activeLayer.appendTop(path);
equals(doc.activeLayer.isChild(path), false);
equals(secondDoc.activeLayer.isChild(path), true);
- equals(doc.activeLayer.children.indexOf(path) != -1, true);
+ equals(doc.activeLayer.children.indexOf(path) == -1, true);
equals(secondDoc.activeLayer.children.indexOf(path) == 0, true);
});
@@ -24,8 +24,6 @@ test('item.lastChild / item.firstChild', function() {
var doc = new Doc();
var path = new Path();
var secondPath = new Path();
- doc.activeLayer.appendTop(path);
- doc.activeLayer.appendTop(secondPath);
equals(doc.activeLayer.firstChild == path, true);
equals(doc.activeLayer.lastChild == secondPath, true);
});
@@ -34,7 +32,6 @@ test('appendBottom(item)', function() {
var doc = new Doc();
var path = new Path();
var secondPath = new Path();
- doc.activeLayer.appendChild(path);
doc.activeLayer.appendBottom(secondPath);
equals(secondPath.index < path.index, true);
});
@@ -43,8 +40,6 @@ test('moveAbove(item)', function() {
var doc = new Doc();
var path = new Path();
var secondPath = new Path();
- doc.activeLayer.appendChild(path);
- doc.activeLayer.appendChild(secondPath);
path.moveAbove(secondPath);
equals(doc.activeLayer.lastChild == path, true);
});
@@ -53,8 +48,6 @@ test('moveBelow(item)', function() {
var doc = new Doc();
var firstPath = new Path();
var secondPath = new Path();
- doc.activeLayer.appendChild(firstPath);
- doc.activeLayer.appendChild(secondPath);
equals(secondPath.index > firstPath.index, true);
secondPath.moveBelow(firstPath);
equals(secondPath.index < firstPath.index, true);
@@ -63,7 +56,6 @@ test('moveBelow(item)', function() {
test('isDescendant(item)', function() {
var doc = new Doc();
var path = new Path();
- doc.activeLayer.appendChild(firstPath);
equals(path.isDescendant(doc.activeLayer), true);
equals(doc.activeLayer.isDescendant(path), false);
});
@@ -72,8 +64,6 @@ test('getPreviousSibling() / getNextSibling()', function() {
var doc = new Doc();
var firstPath = new Path();
var secondPath = new Path();
- doc.activeLayer.appendTop(firstPath);
- doc.activeLayer.appendTop(secondPath);
equals(firstPath.nextSibling == secondPath, true);
equals(secondPath.previousSibling == firstPath, true);
equals(secondPath.nextSibling == null, true);
@@ -82,7 +72,6 @@ test('getPreviousSibling() / getNextSibling()', function() {
test('hidden', function() {
var doc = new Doc();
var firstPath = new Path();
- doc.activeLayer.appendTop(firstPath);
firstPath.visible = false;
equals(firstPath.hidden, true);
});
\ No newline at end of file