scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-06-12 13:10:38 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Rename Document -> Project, DocumentView -> ProjectView, paper.document -> paper.project and paper.documents -> paper.projects, to avoid name clashing with window.document.

Browse source
This commit is contained in:
Jürg Lehni 2011-05-16 13:33:15 +01:00
parent edd36e7df8
commit cfe968d30e
37 changed files with 699 additions and 183 deletions

4
examples/Animated/AnimatedStar.html
View file

@ -7,7 +7,7 @@
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
var layer = document.activeLayer;
var layer = project.activeLayer;
var values = {
count: 34,
@ -42,7 +42,7 @@
// Reposition the paths whenever the window is resized:
function onResize(event) {
document.activeLayer.position = view.center;
project.activeLayer.position = view.center;
}
</script>
</head>

4
examples/Animated/Flock.html
View file

@ -10,7 +10,7 @@
// Adapted from Flocking Processing example by Daniel Schiffman:
// http://processing.org/learning/topics/flocking.html
document.currentStyle = {
project.currentStyle = {
strokeColor: 'white',
strokeWidth: 2,
strokeCap: 'round'
@ -281,7 +281,7 @@
groupTogether = !groupTogether;
}
var layer = document.activeLayer;
var layer = project.activeLayer;
function onKeyDown(event) {
if (event.key == 'space') {
layer.selected = !layer.selected;

2
examples/Animated/Lines.html
View file

@ -17,7 +17,7 @@
var position = view.center;
var mousePos = position;
var children = document.activeLayer.children;
var children = project.activeLayer.children;
var count = 0;
function iterate() {

2
examples/Animated/RoundedRectangles.html
View file

@ -29,7 +29,7 @@
mousePoint = event.point;
}
var children = document.activeLayer.children;
var children = project.activeLayer.children;
function onFrame(event) {
for (var i = 0, l = children.length; i < l; i++) {
var item = children[i];

2
examples/Scripts/Arcs.html
View file

@ -22,7 +22,7 @@
path.arcTo(point + vector, true);
}
}
document.activeLayer.appendBottom(path);
project.activeLayer.appendBottom(path);
}
</script>
</head>

2
examples/Scripts/CompoundPath.html
View file

@ -7,7 +7,7 @@
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
document.currentStyle.fillColor = 'black';
project.currentStyle.fillColor = 'black';
var path1 = new Path.Rectangle([200, 200], [100, 100]);
var path2 = new Path.Rectangle([50, 50], [200, 200]);
var path3 = new Path.Rectangle([0, 0], [400, 400]);

4
examples/Scripts/RotationRaster.html
View file

@ -28,11 +28,11 @@
}
}
}
document.activeLayer.position = view.center;
project.activeLayer.position = view.center;
// Reposition the paths whenever the window is resized:
function onResize(event) {
document.activeLayer.position = view.center;
project.activeLayer.position = view.center;
}
</script>
</head>

2
examples/Scripts/RoundRectangle.html
View file

@ -9,7 +9,7 @@
<script type="text/paperscript" canvas="canvas">
var path;
var rect = new Rectangle([150, 150], [300, 300]);
document.currentStyle.fillColor = 'black';
project.currentStyle.fillColor = 'black';
function onFrame(event) {
if (path)

2
examples/Tools/Circles.html
View file

@ -9,7 +9,7 @@
<script type="text/paperscript" canvas="canvas">
// All newly created items will receive
// these style properties:
document.currentStyle = {
project.currentStyle = {
fillColor: 'white',
strokeColor: 'black'
};

2
examples/Tools/Clouds.html
View file

@ -8,7 +8,7 @@
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
// Any newly created item will inherit the following styles:
document.currentStyle = {
project.currentStyle = {
strokeColor: 'black',
strokeWidth: 5,
strokeJoin: 'round',

2
examples/Tools/MetaBalls.html
View file

@ -9,7 +9,7 @@
<script type="text/paperscript" canvas="canvas">
// Ported from original Metaball script by SATO Hiroyuki
// http://park12.wakwak.com/~shp/lc/et/en_aics_script.html
document.currentStyle = {
project.currentStyle = {
fillColor: 'black'
};

2
examples/Tools/SquareRounded.html
View file

@ -17,7 +17,7 @@
checkValues();
document.currentStyle = {
project.currentStyle = {
strokeColor: 'black',
strokeWidth: 5,
strokeCap: 'round'

2
examples/Tools/Stars.html
View file

@ -9,7 +9,7 @@
<script type="text/paperscript" canvas="canvas">
function onMouseDown(event) {
var hue = Math.random() * 360;
document.currentStyle.fillColor = new HSBColor(hue, 1, 1);
project.currentStyle.fillColor = new HSBColor(hue, 1, 1);
}
function onMouseDrag(event) {

2
examples/Tools/Worm Farm.html
View file

@ -17,7 +17,7 @@
};
// All newly created items will inherit the following styles:
document.currentStyle = {
project.currentStyle = {
fillColor: 'white',
strokeColor: 'black'
};

4
src/basic/Point.js
View file

@ -16,7 +16,7 @@
/**
* The Point object represents a point in the two dimensional space of the
* Paper.js document. It is also used to represent two dimensional vector
* Paper.js project. It is also used to represent two dimensional vector
* objects.
*/
var Point = this.Point = Base.extend({
@ -341,7 +341,7 @@ var Point = this.Point = Base.extend({
* Both points are interpreted as vectors.
*
* @param point
* @return the project of the point on another point
* @return the projection of the point on another point
*/
project: function(point) {
point = Point.read(arguments);

2
src/core/Base.js
View file

@ -46,7 +46,7 @@ Base.inject({
/**
* Utility function for adding and removing items from a list of which
* each entry keeps a reference to its index in the list in the private
* _index property. Used for PaperScope#documents and Item#children.
* _index property. Used for PaperScope#projects and Item#children.
*/
splice: function(list, items, index, remove) {
var amount = items && items.length,

21
src/core/PaperScope.js
View file

@ -22,25 +22,22 @@ var PaperScope = this.PaperScope = Base.extend({
beans: true,
initialize: function(id) {
this.document = null;
this.documents = [];
this.project = null;
this.projects = [];
this.tools = [];
this.id = id;
PaperScope._scopes[id] = this;
},
/**
* A short-cut to the currently active view of the active document.
* A short-cut to the currently active view of the active project.
*/
getView: function() {
return this.document.activeView;
return this.project.activeView;
},
/**
* A short-cut to the currently active layer of the active document.
*/
getLayer: function() {
return this.document.activeLayer;
getViews: function() {
return this.project.views;
},
evaluate: function(code) {
@ -63,9 +60,9 @@ var PaperScope = this.PaperScope = Base.extend({
},
clear: function() {
// Remove all documents and tools.
for (var i = this.documents.length - 1; i >= 0; i--)
this.documents[i].remove();
// Remove all projects and tools.
for (var i = this.projects.length - 1; i >= 0; i--)
this.projects[i].remove();
for (var i = this.tools.length - 1; i >= 0; i--)
this.tools[i].remove();
},

16
src/core/PaperScript.js
View file

@ -133,15 +133,15 @@ var PaperScript = this.PaperScript = new function() {
//#ifdef BROWSER
// See if it's a script tag or a string
if (typeof code !== 'string') {
// If a canvas id is provided, create a document for it now,
// so the active document is defined.
// If a canvas id is provided, create a project for it now,
// so the active project is defined.
var canvas = code.getAttribute('canvas');
if (canvas = canvas && document.getElementById(canvas)) {
// Create a Document for this canvas, using the right scope
// Create a Project for this canvas, using the right scope
paper = scope;
// XXX: Do not pass canvas to Document.
// Create DocumentView here instead.
new Document(canvas);
// XXX: Do not pass canvas to Project.
// Create ProjectView here instead.
new Project(canvas);
}
if (code.src) {
// If we're loading from a source, request that first and then
@ -153,8 +153,8 @@ var PaperScript = this.PaperScript = new function() {
}
}
//#endif // BROWSER
var doc = scope.document,
view = doc.activeView,
var proj = scope.project,
view = proj.activeView,
// TODO: Add support for multiple tools
tool = scope.tool = /on(?:Key|Mouse)(?:Up|Down|Move|Drag)/.test(code)
&& new Tool(null, scope),

48
src/item/Item.js
View file

@ -18,8 +18,8 @@ var Item = this.Item = Base.extend({
beans: true,
initialize: function() {
paper.document.activeLayer.appendTop(this);
this.setStyle(this._document.getCurrentStyle());
paper.project.activeLayer.appendTop(this);
this.setStyle(this._project.getCurrentStyle());
},
/**
@ -88,25 +88,25 @@ var Item = this.Item = Base.extend({
},
/**
* When passed a document, copies the item to the document,
* or duplicates it within the same document. When passed an item,
* When passed a project, copies the item to the project,
* or duplicates it within the same project. When passed an item,
* copies the item into the specified item.
*
* @param document the document to copy the item to
* @param project the project to copy the item to
* @return the new copy of the item
*/
copyTo: function(itemOrDocument) {
copyTo: function(itemOrProject) {
var copy = this.clone();
if (itemOrDocument.layers) {
itemOrDocument.activeLayer.appendTop(copy);
if (itemOrProject.layers) {
itemOrProject.activeLayer.appendTop(copy);
} else {
itemOrDocument.appendTop(copy);
itemOrProject.appendTop(copy);
}
return copy;
},
/**
* Clones the item within the same document.
* Clones the item within the same project.
*
* @return the newly cloned item
*/
@ -127,9 +127,9 @@ var Item = this.Item = Base.extend({
} else {
if ((selected = !!selected) != this._selected) {
// TODO: when an item is removed or moved to another
// document, it needs to be removed from _selectedItems
// project, it needs to be removed from _selectedItems
this._selected = selected;
this._document._selectItem(this, selected);
this._project._selectItem(this, selected);
}
}
},
@ -147,16 +147,16 @@ var Item = this.Item = Base.extend({
return false;
},
getDocument: function() {
return this._document;
getProject: function() {
return this._project;
},
_setDocument: function(document) {
if (this._document != document) {
this._document = document;
_setProject: function(project) {
if (this._project != project) {
this._project = project;
if (this._children) {
for (var i = 0, l = this._children.length; i < l; i++) {
this._children[i]._setDocument(document);
this._children[i]._setProject(project);
}
}
}
@ -338,7 +338,7 @@ var Item = this.Item = Base.extend({
/**
* Checks if this item is above the specified item in the stacking order of
* the document.
* the project.
*
* @param item The item to check against
* @return true if it is above the specified item, false otherwise.
@ -347,7 +347,7 @@ var Item = this.Item = Base.extend({
/**
* Checks if the item is below the specified item in the stacking order of
* the document.
* the project.
*
* @param item The item to check against
* @return true if it is below the specified item, false otherwise.
@ -491,7 +491,7 @@ var Item = this.Item = Base.extend({
rasterize: function(resolution) {
// TODO: why would we want to pass a size to rasterize? Seems to produce
// weird results on Scriptographer. Also we can't use antialiasing, since
// Canvas doesn't support it yet. Document colorMode is also out of the
// Canvas doesn't support it yet. Project colorMode is also out of the
// question for now.
var bounds = this.getStrokeBounds(),
scale = (resolution || 72) / 72,
@ -649,7 +649,7 @@ var Item = this.Item = Base.extend({
}
},
// TODO: Implement DocumentView into the drawing
// TODO: Implement ProjectView into the drawing
// TODO: Optimize temporary canvas drawing to ignore parts that are
// outside of the visible view.
draw: function(item, ctx, param) {
@ -737,7 +737,7 @@ var Item = this.Item = Base.extend({
if (this._children) {
Base.splice(this._children, [item], top ? undefined : 0, 0);
item._parent = this;
item._setDocument(this._document);
item._setProject(this._project);
if (item._name)
item.setName(item._name);
return true;
@ -753,7 +753,7 @@ var Item = this.Item = Base.extend({
Base.splice(item._parent._children, [this],
item._index + (above ? 1 : -1), 0);
this._parent = item._parent;
this._setDocument(item._document);
this._setProject(item._project);
if (item._name)
item.setName(item._name);
return true;

22
src/item/Layer.js
View file

@ -20,43 +20,43 @@ var Layer = this.Layer = Group.extend({
initialize: function() {
this._children = [];
this._namedChildren = {};
this._document = paper.document;
// Push it onto document.layers and set index:
this._index = this._document.layers.push(this) - 1;
this._project = paper.project;
// Push it onto project.layers and set index:
this._index = this._project.layers.push(this) - 1;
this.activate();
},
/**
* Removes the layer from its document's layers list
* Removes the layer from its project's layers list
* or its parent's children list.
*/
_removeFromParent: function() {
return this._parent ? this.base()
: !!Base.splice(this._document.layers, null, this._index, 1).length;
: !!Base.splice(this._project.layers, null, this._index, 1).length;
},
getNextSibling: function() {
return this._parent ? this.base()
: this._document.layers[this._index + 1] || null;
: this._project.layers[this._index + 1] || null;
},
getPreviousSibling: function() {
return this._parent ? this.base()
: this._document.layers[this._index - 1] || null;
: this._project.layers[this._index - 1] || null;
},
activate: function() {
this._document.activeLayer = this;
this._project.activeLayer = this;
}
}, new function () {
function move(above) {
return function(item) {
// if the item is a layer and contained within Document#layers
// if the item is a layer and contained within Project#layers
if (item instanceof Layer && !item._parent
&& this._removeFromParent()) {
Base.splice(item._document.layers, [this],
Base.splice(item._project.layers, [this],
item._index + (above ? 1 : -1), 0);
this._setDocument(item._document);
this._setProject(item._project);
return true;
}
return this.base(item);

2
src/item/Raster.js
View file

@ -24,9 +24,11 @@ var Raster = this.Raster = Item.extend({
if (object.getContext) {
this.setCanvas(object);
} else {
//#ifdef BROWSER
// If it's a string, get the element with this id first.
if (typeof object === 'string')
object = document.getElementById(object);
//#endif // BROWSER
this.setImage(object);
}
this.matrix = new Matrix();

8
src/load.js
View file

@ -35,9 +35,9 @@ var sources = [
'src/basic/Matrix.js',
'src/basic/Line.js',
'src/document/DocumentView.js',
'src/document/Document.js',
'src/document/Symbol.js',
'src/project/ProjectView.js',
'src/project/Project.js',
'src/project/Symbol.js',
'src/item/ChangeFlags.js',
'src/item/Item.js',
@ -93,7 +93,7 @@ if (window.tests) {
'test/tests/Size.js',
'test/tests/Rectangle.js',
'test/tests/Color.js',
'test/tests/Document.js',
'test/tests/Project.js',
'test/tests/Item.js',
'test/tests/Layer.js',
'test/tests/Group.js',

7
src/paper.js
View file

@ -52,9 +52,9 @@ var paper = new function() {
//#include "basic/Matrix.js"
//#include "basic/Line.js"
//#include "document/DocumentView.js"
//#include "document/Document.js"
//#include "document/Symbol.js"
//#include "project/ProjectView.js"
//#include "project/Project.js"
//#include "project/Symbol.js"
//#include "item/ChangeFlags.js"
//#include "item/Item.js"
@ -86,6 +86,7 @@ var paper = new function() {
//#include "browser/DomElement.js"
//#include "browser/DomEvent.js"
//#include "browser/Request.js"
//#include "ui/Event.js"
//#include "ui/KeyEvent.js"

2
src/path/Path.js
View file

@ -287,7 +287,7 @@ var Path = this.Path = PathItem.extend({
var wasSelected = this.isSelected(),
length = this._segments.length;
if (!wasSelected != !selected && length)
this._document._selectItem(this, selected);
this._project._selectItem(this, selected);
this._selectedSegmentCount = selected ? length : 0;
for (var i = 0; i < length; i++)
this._segments[i]._selectionState = selected

4
src/path/Segment.js
View file

@ -199,13 +199,13 @@ var Segment = this.Segment = Base.extend({
| (selection[2] ? SelectionState.HANDLE_OUT : 0);
// If the selection state of the segment has changed, we need to let
// it's path know and possibly add or remove it from
// document._selectedItems
// project._selectedItems
if (wasSelected != !!this._selectionState) {
var path = this._path,
count = path._selectedSegmentCount
+= this._selectionState ? 1 : -1;
if (count <= 1)
path._document._selectItem(path, count == 1);
path._project._selectItem(path, count == 1);
}
},

137
src/project/Project.js Normal file
View file

@ -0,0 +1,137 @@
/*
* 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/
*
* Distributed under the MIT license. See LICENSE file for details.
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
* All rights reserved.
*/
var Project = this.Project = Base.extend({
beans: true,
// XXX: Add arguments to define pages, but do not pass canvas here
initialize: function(canvas) {
// Store reference to the currently active global paper scope:
this._scope = paper;
// Push it onto this._scope.projects and set index:
this._index = this._scope.projects.push(this) - 1;
// Activate straight away so paper.project is set, as required by
// Layer and DoumentView constructors.
this.activate();
this.layers = [];
this.views = [];
this.symbols = [];
this.activeLayer = new Layer();
this.activeView = canvas ? new ProjectView(canvas) : null;
this._selectedItems = {};
this._selectedItemCount = 0;
this.setCurrentStyle(null);
},
getCurrentStyle: function() {
return this._currentStyle;
},
setCurrentStyle: function(style) {
this._currentStyle = PathStyle.create(null, style);
},
activate: function() {
if (this._index != null) {
this._scope.project = this;
return true;
}
return false;
},
remove: function() {
var res = Base.splice(this._scope.projects, null, this._index, 1);
this._scope = null;
// Remove all views. This also removes the installed event handlers.
for (var i = this.views.length - 1; i >= 0; i--)
this.views[i].remove();
return !!res.length;
},
getIndex: function() {
return this._index;
},
getSelectedItems: function() {
// TODO: return groups if their children are all selected,
// and filter out their children from the list.
// TODO: the order of these items should be that of their
// drawing order.
var items = [];
Base.each(this._selectedItems, function(item) {
items.push(item);
});
return items;
},
// TODO: implement setSelectedItems?
_selectItem: function(item, select) {
if (select) {
this._selectedItemCount++;
this._selectedItems[item.getId()] = item;
} else {
this._selectedItemCount--;
delete this._selectedItems[item.getId()];
}
},
/**
* Selects all items in the project.
*/
selectAll: function() {
// TODO: is using for var i in good practice?
// or should we use Base.each? (JP)
for (var i = 0, l = this.layers.length; i < l; i++)
this.layers[i].setSelected(true);
},
/**
* Deselects all selected items in the project.
*/
deselectAll: function() {
// TODO: is using for var i in good practice?
// or should we use Base.each? (JP)
for (var i in this._selectedItems)
this._selectedItems[i].setSelected(false);
},
draw: function(ctx) {
ctx.save();
var param = { offset: new Point(0, 0) };
for (var i = 0, l = this.layers.length; i < l; i++)
Item.draw(this.layers[i], ctx, param);
ctx.restore();
// Draw the selection of the selected items in the project:
if (this._selectedItemCount > 0) {
ctx.save();
ctx.strokeWidth = 1;
// TODO: use Layer#color
ctx.strokeStyle = ctx.fillStyle = '#009dec';
param = { selection: true };
Base.each(this._selectedItems, function(item) {
item.draw(ctx, param);
});
ctx.restore();
}
},
redraw: function() {
for (var i = 0, l = this.views.length; i < l; i++)
this.views[i].draw();
}
});

341
src/project/ProjectView.js Normal file
View file

@ -0,0 +1,341 @@
/*
* 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/
*
* Distributed under the MIT license. See LICENSE file for details.
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
* All rights reserved.
*/
var ProjectView = this.ProjectView = Base.extend({
beans: true,
// TODO: Add bounds parameter that defines position within canvas?
// Find a good name for these bounds, since #bounds is already the artboard
// bounds of the visible area.
initialize: function(canvas) {
// To go with the convention of never passing project to constructors,
// in all items, associate the view with the currently active project.
this._project = paper.project;
this._scope = this._project._scope;
// Push it onto project.views and set index:
this._index = this._project.views.push(this) - 1;
// Handle canvas argument
var size;
if (canvas && canvas instanceof HTMLCanvasElement) {
this._canvas = canvas;
var offset = DomElement.getOffset(canvas);
// If the canvas has the resize attribute, resize the it to fill the
// window and resize it again whenever the user resizes the window.
if (canvas.attributes.resize) {
size = DomElement.getWindowSize().subtract(offset);
canvas.width = size.width;
canvas.height = size.height;
var that = this;
DomEvent.add(window, {
resize: function(event) {
// Only get canvas offset if it's not invisible (size is
// 0, 0), as otherwise the offset would be wrong.
if (!DomElement.getSize(canvas).equals([0, 0]))
offset = DomElement.getOffset(canvas);
// Set the size now, which internally calls onResize
that.setViewSize(
DomElement.getWindowSize().subtract(offset));
// If there's a _onFrameCallback, call it staight away,
// but without requesting another animation frame.
if (that._onFrameCallback) {
that._onFrameCallback(0, true);
} else {
that.draw();
}
}
});
} else {
size = Size.create(canvas.offsetWidth, canvas.offsetHeight);
}
// TODO: Test this on IE:
if (canvas.attributes.stats) {
this._stats = new Stats();
// Align top-left to the canvas
var element = this._stats.domElement,
style = element.style;
style.position = 'absolute';
style.left = offset.x + 'px';
style.top = offset.y + 'px';
document.body.appendChild(element);
}
} else {
// 2nd argument onwards could be view size, otherwise use default:
size = Size.read(arguments, 1);
if (size.isZero())
size = new Size(1024, 768);
this._canvas = CanvasProvider.getCanvas(size);
}
this._viewBounds = LinkedRectangle.create(this, 'setViewBounds',
0, 0, size.width, size.height);
this._context = this._canvas.getContext('2d');
this._matrix = new Matrix();
this._zoom = 1;
this._events = this._createEvents();
DomEvent.add(this._canvas, this._events);
// Make sure the first view is focused for keyboard input straight away
if (!ProjectView.focused)
ProjectView.focused = this;
},
getProject: function() {
return this._project;
},
getViewBounds: function() {
return this._viewBounds;
},
setViewBounds: function(bounds) {
bounds = Rectangle.read(arguments);
var size = bounds.getSize(),
delta = size.subtract(this._viewBounds.getSize());
// TODO: Take into acount bounds.x/y and decide on what grounds to
// change canvas size. Also, if x/y is not 0, do we need to add that
// to transform, or is that up to the user?
this._canvas.width = size.width;
this._canvas.height = size.height;
// Call onResize handler on any size change
if (this.onResize) {
this.onResize({
size: size,
delta: delta
});
}
// Force recalculation
this._bounds = null;
},
getViewSize: function() {
return this._viewBounds.getSize();
},
setViewSize: function(size) {
this._viewBounds.setSize.apply(this._viewBounds, arguments);
},
getBounds: function() {
if (!this._bounds)
this._bounds = this._matrix._transformBounds(this._viewBounds);
return this._bounds;
},
getSize: function() {
return this.getBounds().getSize();
},
getCenter: function() {
return this.getBounds().getCenter();
},
setCenter: function(center) {
this.scrollBy(Point.read(arguments).subtract(this.getCenter()));
},
getZoom: function() {
return this._zoom;
},
setZoom: function(zoom) {
// TODO: Clamp the view between 1/32 and 64, just like Illustrator?
var mx = new Matrix();
mx.scale(zoom / this._zoom, this._center);
this.transform(mx);
this._zoom = zoom;
},
scrollBy: function(point) {
this.transform(new Matrix().translate(Point.read(arguments).negate()));
},
draw: function() {
if (this._stats)
this._stats.update();
// Initial tests conclude that clearing the canvas using clearRect
// is always faster than setting canvas.width = canvas.width
// http://jsperf.com/clearrect-vs-setting-width/7
var bounds = this._viewBounds;
this._context.clearRect(bounds._x, bounds._y,
// TODO: +1... what if we have multiple views in one canvas?
bounds._width + 1, bounds._height + 1);
this._project.draw(this._context);
},
activate: function() {
this._project.activeView = this;
},
remove: function() {
var res = Base.splice(this._project.views, null, this._index, 1);
// Uninstall event handlers again for this view.
DomEvent.remove(this._canvas, this._events);
this._project = this._scope = this._canvas = this._events = null;
// Clearing _onFrame makes the frame handler stop automatically.
this._onFrame = null;
return !!res.length;
},
transform: function(matrix, flags) {
this._matrix.preConcatenate(matrix);
// Force recalculation of these values next time they are requested.
this._bounds = null;
this._inverse = null;
},
_getInverse: function() {
if (!this._inverse)
this._inverse = this._matrix.createInverse();
return this._inverse;
},
// TODO: getInvalidBounds
// TODO: invalidate(rect)
// TODO: style: artwork / preview / raster / opaque / ink
// TODO: getShowGrid
// TODO: getMousePoint
// TODO: artworkToView(rect)
artworkToView: function(point) {
return this._matrix._transformPoint(Point.read(arguments));
},
viewToArtwork: function(point) {
return this._getInverse()._transformPoint(Point.read(arguments));
},
/**
* Handler to be called whenever a view gets resized.
*/
onResize: null,
/**
* Handler to be called on each frame of an animation.
*/
getOnFrame: function() {
return this._onFrame;
},
setOnFrame: function(onFrame) {
this._onFrame = onFrame;
if (!onFrame) {
delete this._onFrameCallback;
return;
}
var that = this,
requested = false,
before,
time = 0,
count = 0;
this._onFrameCallback = function(param, dontRequest) {
requested = false;
if (!that._onFrame)
return;
// Set the global paper object to the current scope
paper = that._scope;
// Request next frame already
requested = true;
if (!dontRequest) {
DomEvent.requestAnimationFrame(that._onFrameCallback,
that._canvas);
}
var now = Date.now() / 1000,
delta = before ? now - before : 0;
that._onFrame({
delta: delta, // Time elapsed since last redraw in seconds
time: time += delta, // Time since first call of frame() in seconds
count: count++
});
before = now;
// Automatically draw view on each frame.
that.draw();
};
// Call the onFrame handler straight away, initializing the sequence
// of onFrame calls.
if (!requested)
this._onFrameCallback();
},
_createEvents: function() {
var that = this,
tool,
timer,
curPoint,
dragging = false;
function viewToArtwork(event) {
return that.viewToArtwork(DomEvent.getOffset(event));
}
function mousedown(event) {
// Tell the Key class which view should receive keyboard input.
ProjectView.focused = that;
if (!(tool = that._scope.tool))
return;
curPoint = viewToArtwork(event);
tool.onHandleEvent('mousedown', curPoint, event);
if (tool.onMouseDown)
that.draw();
if (tool.eventInterval != null)
timer = setInterval(mousemove, tool.eventInterval);
dragging = true;
}
function mousemove(event) {
if (!(tool = that._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.draw();
// 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.draw();
}
}
function mouseup(event) {
if (!dragging)
return;
dragging = false;
curPoint = null;
if (tool) {
if (tool.eventInterval != null)
timer = clearInterval(timer);
tool.onHandleEvent('mouseup', viewToArtwork(event), event);
if (tool.onMouseUp)
that.draw();
}
}
return {
mousedown: mousedown,
mousemove: mousemove,
mouseup: mouseup,
touchstart: mousedown,
touchmove: mousemove,
touchend: mouseup
};
}
});

38
src/project/Symbol.js Normal file
View file

@ -0,0 +1,38 @@
/*
* 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/
*
* Distributed under the MIT license. See LICENSE file for details.
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
* All rights reserved.
*/
var Symbol = this.Symbol = Base.extend({
beans: true,
initialize: function(item) {
this.project = paper.project;
this.project.symbols.push(this);
this.setDefinition(item);
},
getDefinition: function() {
return this._definition;
},
setDefinition: function(item) {
this._definition = item;
item._removeFromParent();
item.setPosition(new Point());
}
// TODO:
// remove()
});

8
src/tool/ToolEvent.js
View file

@ -39,7 +39,7 @@ var ToolEvent = this.ToolEvent = Base.extend({
},
/**
* The position of the mouse in document coordinates when the event was
* The position of the mouse in project coordinates when the event was
* fired.
*/
getPoint: function() {
@ -51,7 +51,7 @@ var ToolEvent = this.ToolEvent = Base.extend({
},
/**
* The position of the mouse in document coordinates when the previous
* The position of the mouse in project coordinates when the previous
* event was fired.
*/
getLastPoint: function() {
@ -63,7 +63,7 @@ var ToolEvent = this.ToolEvent = Base.extend({
},
/**
* The position of the mouse in document coordinates when the mouse button
* The position of the mouse in project coordinates when the mouse button
* was last clicked.
*/
getDownPoint: function() {
@ -136,7 +136,7 @@ var ToolEvent = this.ToolEvent = Base.extend({
// TODO: implement hitTest first
// getItem: function() {
// if (this.item == null) {
// var result = Document.getActiveDocument().hitTest(this.getPoint());
// var result = Project.getActiveProject().hitTest(this.getPoint());
// if (result != null) {
// this.item = result.getItem();
// // Find group parent

2
src/ui/Key.js
View file

@ -65,7 +65,7 @@ var Key = this.Key = new function() {
var character = String.fromCharCode(charCode),
key = keys[keyCode] || character.toLowerCase(),
handler = down ? 'onKeyDown' : 'onKeyUp',
scope = DocumentView.focused && DocumentView.focused._scope,
scope = ProjectView.focused && ProjectView.focused._scope,
tool = scope && scope.tool;
keyMap[key] = down;
if (tool && tool[handler]) {

4
test/lib/helpers.js
View file

@ -20,9 +20,9 @@ function equals(actual, expected, message) {
function test(testName, expected) {
return QUnit.test(testName, function() {
var doc = new Document();
var proj = new Project();
expected();
doc.remove();
proj.remove();
});
}

10
test/tests/Document.js
View file

@ -1,12 +1,12 @@
module('Document');
module('Project');
test('activate()', function() {
var doc = new Document();
var secondDoc = new Document();
doc.activate();
var proj = new Project();
var secondDoc = new Project();
proj.activate();
var path = new Path();
equals(function() {
return doc.activeLayer.children[0] == path;
return proj.activeLayer.children[0] == path;
}, true);
equals(function() {
return secondDoc.activeLayer.children.length == 0;

6
test/tests/Group.js
View file

@ -3,7 +3,7 @@ module('Group');
test('new Group()', function() {
var group = new Group();
equals(function() {
return paper.document.activeLayer.children[0] == group;
return paper.project.activeLayer.children[0] == group;
}, true);
});
@ -11,7 +11,7 @@ test('new Group([item])', function() {
var path = new Path();
var group = new Group([path]);
equals(function() {
return paper.document.activeLayer.children.length;
return paper.project.activeLayer.children.length;
}, 1);
equals(function() {
return group.children[0] == path;
@ -19,7 +19,7 @@ test('new Group([item])', function() {
});
test('Group bounds', function() {
paper.document.currentStyle = {
paper.project.currentStyle = {
strokeWidth: 5,
strokeColor: 'black'
};

134
test/tests/Item.js
View file

@ -1,15 +1,15 @@
module('Item');
test('copyTo(document)', function() {
var doc = paper.document;
test('copyTo(project)', function() {
var proj = paper.project;
var path = new Path();
var secondDoc = new Document();
var secondDoc = new Project();
var copy = path.copyTo(secondDoc);
equals(function() {
return secondDoc.activeLayer.children.indexOf(copy) != -1;
}, true);
equals(function() {
return doc.activeLayer.children.indexOf(copy) == -1;
return proj.activeLayer.children.indexOf(copy) == -1;
}, true);
equals(function() {
return copy != path;
@ -17,7 +17,7 @@ test('copyTo(document)', function() {
});
test('copyTo(layer)', function() {
var doc = paper.document;
var proj = paper.project;
var path = new Path();
var layer = new Layer();
@ -26,16 +26,16 @@ test('copyTo(layer)', function() {
return layer.children.indexOf(copy) != -1;
}, true);
equals(function() {
return doc.layers[0].children.indexOf(copy) == -1;
return proj.layers[0].children.indexOf(copy) == -1;
}, true);
});
test('clone()', function() {
var doc = paper.document;
var proj = paper.project;
var path = new Path();
var copy = path.clone();
equals(function() {
return doc.activeLayer.children.length;
return proj.activeLayer.children.length;
}, 2);
equals(function() {
return path != copy;
@ -43,28 +43,28 @@ test('clone()', function() {
});
test('appendChild(item)', function() {
var doc = paper.document;
var proj = paper.project;
var path = new Path();
doc.activeLayer.appendChild(path);
proj.activeLayer.appendChild(path);
equals(function() {
return doc.activeLayer.children.length;
return proj.activeLayer.children.length;
}, 1);
});
test('item.parent / item.isChild / item.isParent', function() {
var doc = paper.document;
var secondDoc = new Document();
var proj = paper.project;
var secondDoc = new Project();
var path = new Path();
doc.activeLayer.appendChild(path);
proj.activeLayer.appendChild(path);
equals(function() {
return doc.activeLayer.children.indexOf(path) != -1;
return proj.activeLayer.children.indexOf(path) != -1;
}, true);
secondDoc.activeLayer.appendTop(path);
equals(function() {
return doc.activeLayer.isChild(path);
return proj.activeLayer.isChild(path);
}, false);
equals(function() {
return path.isParent(doc.activeLayer);
return path.isParent(proj.activeLayer);
}, false);
equals(function() {
return secondDoc.activeLayer.isChild(path);
@ -73,7 +73,7 @@ test('item.parent / item.isChild / item.isParent', function() {
return path.isParent(secondDoc.activeLayer);
}, true);
equals(function() {
return doc.activeLayer.children.indexOf(path) == -1;
return proj.activeLayer.children.indexOf(path) == -1;
}, true);
equals(function() {
return secondDoc.activeLayer.children.indexOf(path) == 0;
@ -81,39 +81,39 @@ test('item.parent / item.isChild / item.isParent', function() {
});
test('item.lastChild / item.firstChild', function() {
var doc = paper.document;
var proj = paper.project;
var path = new Path();
var secondPath = new Path();
equals(function() {
return doc.activeLayer.firstChild == path;
return proj.activeLayer.firstChild == path;
}, true);
equals(function() {
return doc.activeLayer.lastChild == secondPath;
return proj.activeLayer.lastChild == secondPath;
}, true);
});
test('appendBottom(item)', function() {
var doc = paper.document;
var proj = paper.project;
var path = new Path();
var secondPath = new Path();
doc.activeLayer.appendBottom(secondPath);
proj.activeLayer.appendBottom(secondPath);
equals(function() {
return secondPath.index < path.index;
}, true);
});
test('moveAbove(item)', function() {
var doc = paper.document;
var proj = paper.project;
var path = new Path();
var secondPath = new Path();
path.moveAbove(secondPath);
equals(function() {
return doc.activeLayer.lastChild == path;
return proj.activeLayer.lastChild == path;
}, true);
});
test('moveBelow(item)', function() {
var doc = paper.document;
var proj = paper.project;
var firstPath = new Path();
var secondPath = new Path();
equals(function() {
@ -126,33 +126,33 @@ test('moveBelow(item)', function() {
});
test('isDescendant(item) / isAncestor(item)', function() {
var doc = paper.document;
var proj = paper.project;
var path = new Path();
equals(function() {
return path.isDescendant(doc.activeLayer);
return path.isDescendant(proj.activeLayer);
}, true);
equals(function() {
return doc.activeLayer.isDescendant(path);
return proj.activeLayer.isDescendant(path);
}, false);
equals(function() {
return path.isAncestor(doc.activeLayer);
return path.isAncestor(proj.activeLayer);
}, false);
equals(function() {
return doc.activeLayer.isAncestor(path);
return proj.activeLayer.isAncestor(path);
}, true);
// an item can't be its own descendant:
equals(function() {
return doc.activeLayer.isDescendant(doc.activeLayer);
return proj.activeLayer.isDescendant(proj.activeLayer);
}, false);
// an item can't be its own ancestor:
equals(function() {
return doc.activeLayer.isAncestor(doc.activeLayer);
return proj.activeLayer.isAncestor(proj.activeLayer);
}, false);
});
test('isGroupedWith', function() {
var doc = paper.document;
var proj = paper.project;
var path = new Path();
var secondPath = new Path();
var group = new Group([path]);
@ -180,11 +180,11 @@ test('isGroupedWith', function() {
equals(function() {
return path.isGroupedWith(secondGroup);
}, false);
paper.document.activeLayer.appendTop(path);
paper.project.activeLayer.appendTop(path);
equals(function() {
return path.isGroupedWith(secondPath);
}, false);
paper.document.activeLayer.appendTop(secondPath);
paper.project.activeLayer.appendTop(secondPath);
equals(function() {
return path.isGroupedWith(secondPath);
}, false);
@ -205,44 +205,44 @@ test('getPreviousSibling() / getNextSibling()', function() {
});
test('reverseChildren()', function() {
var doc = paper.document;
var proj = paper.project;
var path = new Path();
var secondPath = new Path();
var thirdPath = new Path();
equals(function() {
return doc.activeLayer.firstChild == path;
return proj.activeLayer.firstChild == path;
}, true);
doc.activeLayer.reverseChildren();
proj.activeLayer.reverseChildren();
equals(function() {
return doc.activeLayer.firstChild == path;
return proj.activeLayer.firstChild == path;
}, false);
equals(function() {
return doc.activeLayer.firstChild == thirdPath;
return proj.activeLayer.firstChild == thirdPath;
}, true);
equals(function() {
return doc.activeLayer.lastChild == path;
return proj.activeLayer.lastChild == path;
}, true);
});
test('Check item#document when moving items across documents', function() {
var doc = paper.document;
var doc1 = new Document();
test('Check item#project when moving items across projects', function() {
var proj = paper.project;
var doc1 = new Project();
var path = new Path();
var group = new Group();
group.appendTop(new Path());
equals(function() {
return path.document == doc1;
return path.project == doc1;
}, true);
var doc2 = new Document();
var doc2 = new Project();
doc2.activeLayer.appendTop(path);
equals(function() {
return path.document == doc2;
return path.project == doc2;
}, true);
doc2.activeLayer.appendTop(group);
equals(function() {
return group.children[0].document == doc2;
return group.children[0].project == doc2;
}, true);
});
@ -281,26 +281,26 @@ test('Check parent children object for named item', function() {
var path = new Path();
path.name = 'test';
equals(function() {
return paper.document.activeLayer.children['test'] == path;
return paper.project.activeLayer.children['test'] == path;
}, true);
var path2 = new Path();
path2.name = 'test';
equals(function() {
return paper.document.activeLayer.children['test'] == path2;
return paper.project.activeLayer.children['test'] == path2;
}, true);
path2.remove();
equals(function() {
return paper.document.activeLayer.children['test'] == path;
return paper.project.activeLayer.children['test'] == path;
}, true);
path.remove();
equals(function() {
return !paper.document.activeLayer.children['test'];
return !paper.project.activeLayer.children['test'];
}, true);
});
@ -314,7 +314,7 @@ test('Named child access', function() {
path.remove();
equals(function() {
return paper.document.activeLayer.children['test'] == path2;
return paper.project.activeLayer.children['test'] == path2;
}, true);
});
@ -328,21 +328,21 @@ test('Named child access 2', function() {
path.remove();
equals(function() {
return paper.document.activeLayer.children['test'] == path2;
return paper.project.activeLayer.children['test'] == path2;
}, true);
equals(function() {
return paper.document.activeLayer._namedChildren['test'].length == 1;
return paper.project.activeLayer._namedChildren['test'].length == 1;
}, true);
path2.remove();
equals(function() {
return !paper.document.activeLayer._namedChildren['test'];
return !paper.project.activeLayer._namedChildren['test'];
}, true);
equals(function() {
return paper.document.activeLayer.children['test'] === undefined;
return paper.project.activeLayer.children['test'] === undefined;
}, true);
});
@ -358,11 +358,11 @@ test('Named child access 2', function() {
group.appendTop(path2);
equals(function() {
return paper.document.activeLayer.children['test'] == path;
return paper.project.activeLayer.children['test'] == path;
}, true);
equals(function() {
return paper.document.activeLayer._namedChildren['test'].length == 1;
return paper.project.activeLayer._namedChildren['test'].length == 1;
}, true);
equals(function() {
@ -373,14 +373,14 @@ test('Named child access 2', function() {
return group._namedChildren['test'].length == 1;
}, true);
paper.document.activeLayer.appendTop(path2);
paper.project.activeLayer.appendTop(path2);
equals(function() {
return group._namedChildren['test'] === undefined;
}, true);
equals(function() {
return paper.document.activeLayer._namedChildren['test'].length == 2;
return paper.project.activeLayer._namedChildren['test'].length == 2;
}, true);
});
@ -392,19 +392,19 @@ test('Setting name of child back to null', function() {
path2.name = 'test';
equals(function() {
return paper.document.activeLayer.children['test'] == path2;
return paper.project.activeLayer.children['test'] == path2;
}, true);
path2.name = null;
equals(function() {
return paper.document.activeLayer.children['test'] == path;
return paper.project.activeLayer.children['test'] == path;
}, true);
path.name = null;
equals(function() {
return paper.document.activeLayer.children['test'] === undefined;
return paper.project.activeLayer.children['test'] === undefined;
}, true);
});
@ -415,10 +415,10 @@ test('Renaming item', function() {
path.name = 'test2';
equals(function() {
return paper.document.activeLayer.children['test'] === undefined;
return paper.project.activeLayer.children['test'] === undefined;
}, true);
equals(function() {
return paper.document.activeLayer.children['test2'] == path;
return paper.project.activeLayer.children['test2'] == path;
}, true);
});

14
test/tests/Layer.js
View file

@ -1,8 +1,8 @@
module('Layer');
test('previousSibling / nextSibling', function() {
var doc = paper.document;
var firstLayer = doc.activeLayer;
var proj = paper.project;
var firstLayer = proj.activeLayer;
var secondLayer = new Layer();
equals(function() {
return secondLayer.previousSibling == firstLayer;
@ -30,18 +30,18 @@ test('previousSibling / nextSibling', function() {
return thirdLayer.previousSibling == path;
}, true);
equals(function() {
return doc.layers.length == 2;
return proj.layers.length == 2;
}, true);
firstLayer.appendTop(secondLayer);
equals(function() {
return doc.layers.length == 1;
return proj.layers.length == 1;
}, true);
});
test('moveAbove / moveBelow', function() {
var doc = paper.document;
var firstLayer = doc.activeLayer;
var proj = paper.project;
var firstLayer = proj.activeLayer;
var secondLayer = new Layer();
secondLayer.moveBelow(firstLayer);
equals(function() {
@ -64,6 +64,6 @@ test('moveAbove / moveBelow', function() {
}, true);
// There should now only be one layer left:
equals(function() {
return doc.layers.length;
return proj.layers.length;
}, 1);
});

8
test/tests/Path.js
View file

@ -12,7 +12,7 @@ test('path.join(path)', function() {
path.join(path2);
equals(path.segments.toString(), '{ point: { x: 0, y: 0 } },{ point: { x: 10, y: 0 } },{ point: { x: 20, y: 10 } }');
equals(function() {
return paper.document.activeLayer.children.length;
return paper.project.activeLayer.children.length;
}, 1);
var path = new Path();
@ -78,7 +78,7 @@ test('path.remove()', function() {
path.remove();
equals(function() {
return paper.document.activeLayer.children.length;
return paper.project.activeLayer.children.length;
}, 0);
});
@ -90,7 +90,7 @@ test('Is the path deselected after setting a new list of segments?', function()
return path.selected;
}, true);
equals(function() {
return paper.document.selectedItems.length;
return paper.project.selectedItems.length;
}, 1);
path.segments = [[0, 10]];
@ -98,7 +98,7 @@ test('Is the path deselected after setting a new list of segments?', function()
return path.selected;
}, false);
equals(function() {
return paper.document.selectedItems.length;
return paper.project.selectedItems.length;
}, 0);
});

10
test/tests/PathStyle.js
View file

@ -1,18 +1,18 @@
module('Path Style');
test('currentStyle', function() {
paper.document.currentStyle.fillColor = 'black';
paper.project.currentStyle.fillColor = 'black';
var path = new Path();
compareRGBColors(path.fillColor, 'black', 'path.fillColor');
// When changing the current style of the document, the style of
// paths created using document.currentStyle should not change.
paper.document.currentStyle.fillColor = 'red';
// When changing the current style of the project, the style of
// paths created using project.currentStyle should not change.
paper.project.currentStyle.fillColor = 'red';
compareRGBColors(path.fillColor, 'black', 'path.fillColor');
});
test('setting currentStyle to an object', function() {
paper.document.currentStyle = {
paper.project.currentStyle = {
fillColor: 'red',
strokeColor: 'green'
};