scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2024-12-29 09:22:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Introduce Paper object that keeps track of documents and which documenti is active. Newly created items are automatically appended to the children list of the active document's activeLayer.

Browse source
This commit is contained in:
Jonathan Puckey 2011-02-12 16:20:10 +01:00
parent be4681fecd
commit d7fc9cf481
23 changed files with 95 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/Animated/animatedStar.html
View file

@ -5,6 +5,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
<script type="text/javascript" src="../../src/Paper.js"></script>
<script type="text/javascript" src="../../src/Item.js"></script>
<script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Point.js"></script>
@ -42,7 +43,6 @@
path.add(newPoint);
}
path.smooth();
doc.activeLayer.appendTop(path);
}
doc.activeLayer.children.reverse();
doc.redraw();

5
examples/Scripts/arcTo.html
View file

@ -5,6 +5,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
<script type="text/javascript" src="../../src/Paper.js"></script>
<script type="text/javascript" src="../../src/Item.js"></script>
<script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Point.js"></script>
@ -36,10 +37,8 @@
path.arcTo(point.add(vector), true);
}
}
doc.activeLayer.appendTop(path);
doc.activeLayer.appendBottom(path);
}
doc.activeLayer.children.reverse();
doc.redraw();
}
</script>

2
examples/Scripts/circle.html
View file

@ -5,6 +5,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
<script type="text/javascript" src="../../src/Paper.js"></script>
<script type="text/javascript" src="../../src/Item.js"></script>
<script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Point.js"></script>
@ -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();
}

2
examples/Scripts/letter.html
View file

@ -5,6 +5,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
<script type="text/javascript" src="../../src/Paper.js"></script>
<script type="text/javascript" src="../../src/Item.js"></script>
<script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Point.js"></script>
@ -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();
}
</script>

2
examples/Scripts/lines.html
View file

@ -5,6 +5,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
<script type="text/javascript" src="../../src/Paper.js"></script>
<script type="text/javascript" src="../../src/Item.js"></script>
<script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Point.js"></script>
@ -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();
}

3
examples/Scripts/rectangle.html
View file

@ -5,6 +5,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
<script type="text/javascript" src="../../src/Paper.js"></script>
<script type="text/javascript" src="../../src/Item.js"></script>
<script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Point.js"></script>
@ -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();
}
</script>

2
examples/Scripts/roundRectangle.html
View file

@ -5,6 +5,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
<script type="text/javascript" src="../../src/Paper.js"></script>
<script type="text/javascript" src="../../src/Item.js"></script>
<script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Point.js"></script>
@ -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();
}
</script>

4
examples/Scripts/star.html
View file

@ -5,6 +5,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
<script type="text/javascript" src="../../src/Paper.js"></script>
<script type="text/javascript" src="../../src/Item.js"></script>
<script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Point.js"></script>
@ -35,9 +36,8 @@
path.add(newPoint);
}
path.smooth();
doc.activeLayer.appendTop(path);
doc.activeLayer.appendBottom(path);
}
doc.activeLayer.children.reverse();
doc.redraw();
}
</script>

31
examples/Scripts/strokeJoin.html
View file

@ -5,6 +5,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
<script type="text/javascript" src="../../src/Paper.js"></script>
<script type="text/javascript" src="../../src/Item.js"></script>
<script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Point.js"></script>
@ -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();
}
</script>

9
examples/Tools/Circles.html
View file

@ -5,6 +5,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
<script type="text/javascript" src="../../src/Paper.js"></script>
<script type="text/javascript" src="../../src/Item.js"></script>
<script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Point.js"></script>
@ -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;

2
examples/Tools/Clouds.html
View file

@ -5,6 +5,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
<script type="text/javascript" src="../../src/Paper.js"></script>
<script type="text/javascript" src="../../src/Item.js"></script>
<script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Point.js"></script>
@ -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);

6
examples/Tools/Dripping Brush.html
View file

@ -5,6 +5,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
<script type="text/javascript" src="../../src/Paper.js"></script>
<script type="text/javascript" src="../../src/Item.js"></script>
<script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Point.js"></script>
@ -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);

2
examples/Tools/Fancy Brush.html
View file

@ -5,6 +5,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
<script type="text/javascript" src="../../src/Paper.js"></script>
<script type="text/javascript" src="../../src/Item.js"></script>
<script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Point.js"></script>
@ -36,7 +37,6 @@
onMouseDown: function(event) {
path = new Path();
path.fillColor = event.count % 2 ? 'red' : 'black';
doc.activeLayer.appendTop(path);
},
onMouseDrag: function(event) {

2
examples/Tools/Grid.html
View file

@ -5,6 +5,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
<script type="text/javascript" src="../../src/Paper.js"></script>
<script type="text/javascript" src="../../src/Item.js"></script>
<script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Point.js"></script>
@ -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);

3
examples/Tools/MultiLines.html
View file

@ -5,6 +5,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
<script type="text/javascript" src="../../src/Paper.js"></script>
<script type="text/javascript" src="../../src/Item.js"></script>
<script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Point.js"></script>
@ -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();
}
}

4
examples/Tools/Wave.html
View file

@ -5,6 +5,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
<script type="text/javascript" src="../../src/Paper.js"></script>
<script type="text/javascript" src="../../src/Item.js"></script>
<script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Point.js"></script>
@ -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));

3
examples/Tools/Worm Farm.html
View file

@ -5,6 +5,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
<script type="text/javascript" src="../../src/Paper.js"></script>
<script type="text/javascript" src="../../src/Item.js"></script>
<script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Point.js"></script>
@ -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();

9
src/Doc.js
View file

@ -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);

16
src/Item.js
View file

@ -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;
},

8
src/Layer.js
View file

@ -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) {

10
src/Paper.js Normal file
View file

@ -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];
}
}
});

1
test/index.html
View file

@ -5,6 +5,7 @@
<link rel="stylesheet" href="qunit/qunit.css" type="text/css" media="screen">
<!-- Libraries -->
<script type="text/javascript" src="../src/Bootstrap.js"></script>
<script type="text/javascript" src="../src/Paper.js"></script>
<script type="text/javascript" src="../src/Item.js"></script>
<script type="text/javascript" src="../src/PathItem.js"></script>
<script type="text/javascript" src="../src/Point.js"></script>

17
test/tests_item.js
View file

@ -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);
});