mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-07-12 04:34:41 -04:00
Rename Document -> Project, DocumentView -> ProjectView, paper.document -> paper.project and paper.documents -> paper.projects, to avoid name clashing with window.document.
This commit is contained in:
parent
edd36e7df8
commit
cfe968d30e
37 changed files with 699 additions and 183 deletions
|
@ -7,7 +7,7 @@
|
||||||
<script type="text/javascript">var root = '../../'</script>
|
<script type="text/javascript">var root = '../../'</script>
|
||||||
<script type="text/javascript" src="../../src/load.js"></script>
|
<script type="text/javascript" src="../../src/load.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var layer = document.activeLayer;
|
var layer = project.activeLayer;
|
||||||
|
|
||||||
var values = {
|
var values = {
|
||||||
count: 34,
|
count: 34,
|
||||||
|
@ -42,7 +42,7 @@
|
||||||
|
|
||||||
// Reposition the paths whenever the window is resized:
|
// Reposition the paths whenever the window is resized:
|
||||||
function onResize(event) {
|
function onResize(event) {
|
||||||
document.activeLayer.position = view.center;
|
project.activeLayer.position = view.center;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
// Adapted from Flocking Processing example by Daniel Schiffman:
|
// Adapted from Flocking Processing example by Daniel Schiffman:
|
||||||
// http://processing.org/learning/topics/flocking.html
|
// http://processing.org/learning/topics/flocking.html
|
||||||
|
|
||||||
document.currentStyle = {
|
project.currentStyle = {
|
||||||
strokeColor: 'white',
|
strokeColor: 'white',
|
||||||
strokeWidth: 2,
|
strokeWidth: 2,
|
||||||
strokeCap: 'round'
|
strokeCap: 'round'
|
||||||
|
@ -281,7 +281,7 @@
|
||||||
groupTogether = !groupTogether;
|
groupTogether = !groupTogether;
|
||||||
}
|
}
|
||||||
|
|
||||||
var layer = document.activeLayer;
|
var layer = project.activeLayer;
|
||||||
function onKeyDown(event) {
|
function onKeyDown(event) {
|
||||||
if (event.key == 'space') {
|
if (event.key == 'space') {
|
||||||
layer.selected = !layer.selected;
|
layer.selected = !layer.selected;
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
|
|
||||||
var position = view.center;
|
var position = view.center;
|
||||||
var mousePos = position;
|
var mousePos = position;
|
||||||
var children = document.activeLayer.children;
|
var children = project.activeLayer.children;
|
||||||
var count = 0;
|
var count = 0;
|
||||||
|
|
||||||
function iterate() {
|
function iterate() {
|
||||||
|
|
|
@ -29,7 +29,7 @@
|
||||||
mousePoint = event.point;
|
mousePoint = event.point;
|
||||||
}
|
}
|
||||||
|
|
||||||
var children = document.activeLayer.children;
|
var children = project.activeLayer.children;
|
||||||
function onFrame(event) {
|
function onFrame(event) {
|
||||||
for (var i = 0, l = children.length; i < l; i++) {
|
for (var i = 0, l = children.length; i < l; i++) {
|
||||||
var item = children[i];
|
var item = children[i];
|
||||||
|
|
|
@ -22,7 +22,7 @@
|
||||||
path.arcTo(point + vector, true);
|
path.arcTo(point + vector, true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
document.activeLayer.appendBottom(path);
|
project.activeLayer.appendBottom(path);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
<script type="text/javascript">var root = '../../'</script>
|
<script type="text/javascript">var root = '../../'</script>
|
||||||
<script type="text/javascript" src="../../src/load.js"></script>
|
<script type="text/javascript" src="../../src/load.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
document.currentStyle.fillColor = 'black';
|
project.currentStyle.fillColor = 'black';
|
||||||
var path1 = new Path.Rectangle([200, 200], [100, 100]);
|
var path1 = new Path.Rectangle([200, 200], [100, 100]);
|
||||||
var path2 = new Path.Rectangle([50, 50], [200, 200]);
|
var path2 = new Path.Rectangle([50, 50], [200, 200]);
|
||||||
var path3 = new Path.Rectangle([0, 0], [400, 400]);
|
var path3 = new Path.Rectangle([0, 0], [400, 400]);
|
||||||
|
|
|
@ -28,11 +28,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
document.activeLayer.position = view.center;
|
project.activeLayer.position = view.center;
|
||||||
|
|
||||||
// Reposition the paths whenever the window is resized:
|
// Reposition the paths whenever the window is resized:
|
||||||
function onResize(event) {
|
function onResize(event) {
|
||||||
document.activeLayer.position = view.center;
|
project.activeLayer.position = view.center;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var path;
|
var path;
|
||||||
var rect = new Rectangle([150, 150], [300, 300]);
|
var rect = new Rectangle([150, 150], [300, 300]);
|
||||||
document.currentStyle.fillColor = 'black';
|
project.currentStyle.fillColor = 'black';
|
||||||
|
|
||||||
function onFrame(event) {
|
function onFrame(event) {
|
||||||
if (path)
|
if (path)
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
// All newly created items will receive
|
// All newly created items will receive
|
||||||
// these style properties:
|
// these style properties:
|
||||||
document.currentStyle = {
|
project.currentStyle = {
|
||||||
fillColor: 'white',
|
fillColor: 'white',
|
||||||
strokeColor: 'black'
|
strokeColor: 'black'
|
||||||
};
|
};
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
<script type="text/javascript" src="../../src/load.js"></script>
|
<script type="text/javascript" src="../../src/load.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
// Any newly created item will inherit the following styles:
|
// Any newly created item will inherit the following styles:
|
||||||
document.currentStyle = {
|
project.currentStyle = {
|
||||||
strokeColor: 'black',
|
strokeColor: 'black',
|
||||||
strokeWidth: 5,
|
strokeWidth: 5,
|
||||||
strokeJoin: 'round',
|
strokeJoin: 'round',
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
// Ported from original Metaball script by SATO Hiroyuki
|
// Ported from original Metaball script by SATO Hiroyuki
|
||||||
// http://park12.wakwak.com/~shp/lc/et/en_aics_script.html
|
// http://park12.wakwak.com/~shp/lc/et/en_aics_script.html
|
||||||
document.currentStyle = {
|
project.currentStyle = {
|
||||||
fillColor: 'black'
|
fillColor: 'black'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
|
|
||||||
checkValues();
|
checkValues();
|
||||||
|
|
||||||
document.currentStyle = {
|
project.currentStyle = {
|
||||||
strokeColor: 'black',
|
strokeColor: 'black',
|
||||||
strokeWidth: 5,
|
strokeWidth: 5,
|
||||||
strokeCap: 'round'
|
strokeCap: 'round'
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
function onMouseDown(event) {
|
function onMouseDown(event) {
|
||||||
var hue = Math.random() * 360;
|
var hue = Math.random() * 360;
|
||||||
document.currentStyle.fillColor = new HSBColor(hue, 1, 1);
|
project.currentStyle.fillColor = new HSBColor(hue, 1, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
function onMouseDrag(event) {
|
function onMouseDrag(event) {
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
// All newly created items will inherit the following styles:
|
// All newly created items will inherit the following styles:
|
||||||
document.currentStyle = {
|
project.currentStyle = {
|
||||||
fillColor: 'white',
|
fillColor: 'white',
|
||||||
strokeColor: 'black'
|
strokeColor: 'black'
|
||||||
};
|
};
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The Point object represents a point in the two dimensional space of the
|
* 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.
|
* objects.
|
||||||
*/
|
*/
|
||||||
var Point = this.Point = Base.extend({
|
var Point = this.Point = Base.extend({
|
||||||
|
@ -341,7 +341,7 @@ var Point = this.Point = Base.extend({
|
||||||
* Both points are interpreted as vectors.
|
* Both points are interpreted as vectors.
|
||||||
*
|
*
|
||||||
* @param point
|
* @param point
|
||||||
* @return the project of the point on another point
|
* @return the projection of the point on another point
|
||||||
*/
|
*/
|
||||||
project: function(point) {
|
project: function(point) {
|
||||||
point = Point.read(arguments);
|
point = Point.read(arguments);
|
||||||
|
|
|
@ -46,7 +46,7 @@ Base.inject({
|
||||||
/**
|
/**
|
||||||
* Utility function for adding and removing items from a list of which
|
* 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
|
* 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) {
|
splice: function(list, items, index, remove) {
|
||||||
var amount = items && items.length,
|
var amount = items && items.length,
|
||||||
|
|
|
@ -22,25 +22,22 @@ var PaperScope = this.PaperScope = Base.extend({
|
||||||
beans: true,
|
beans: true,
|
||||||
|
|
||||||
initialize: function(id) {
|
initialize: function(id) {
|
||||||
this.document = null;
|
this.project = null;
|
||||||
this.documents = [];
|
this.projects = [];
|
||||||
this.tools = [];
|
this.tools = [];
|
||||||
this.id = id;
|
this.id = id;
|
||||||
PaperScope._scopes[id] = this;
|
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() {
|
getView: function() {
|
||||||
return this.document.activeView;
|
return this.project.activeView;
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
getViews: function() {
|
||||||
* A short-cut to the currently active layer of the active document.
|
return this.project.views;
|
||||||
*/
|
|
||||||
getLayer: function() {
|
|
||||||
return this.document.activeLayer;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
evaluate: function(code) {
|
evaluate: function(code) {
|
||||||
|
@ -63,9 +60,9 @@ var PaperScope = this.PaperScope = Base.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
clear: function() {
|
clear: function() {
|
||||||
// Remove all documents and tools.
|
// Remove all projects and tools.
|
||||||
for (var i = this.documents.length - 1; i >= 0; i--)
|
for (var i = this.projects.length - 1; i >= 0; i--)
|
||||||
this.documents[i].remove();
|
this.projects[i].remove();
|
||||||
for (var i = this.tools.length - 1; i >= 0; i--)
|
for (var i = this.tools.length - 1; i >= 0; i--)
|
||||||
this.tools[i].remove();
|
this.tools[i].remove();
|
||||||
},
|
},
|
||||||
|
|
|
@ -133,15 +133,15 @@ var PaperScript = this.PaperScript = new function() {
|
||||||
//#ifdef BROWSER
|
//#ifdef BROWSER
|
||||||
// See if it's a script tag or a string
|
// See if it's a script tag or a string
|
||||||
if (typeof code !== 'string') {
|
if (typeof code !== 'string') {
|
||||||
// If a canvas id is provided, create a document for it now,
|
// If a canvas id is provided, create a project for it now,
|
||||||
// so the active document is defined.
|
// so the active project is defined.
|
||||||
var canvas = code.getAttribute('canvas');
|
var canvas = code.getAttribute('canvas');
|
||||||
if (canvas = canvas && document.getElementById(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;
|
paper = scope;
|
||||||
// XXX: Do not pass canvas to Document.
|
// XXX: Do not pass canvas to Project.
|
||||||
// Create DocumentView here instead.
|
// Create ProjectView here instead.
|
||||||
new Document(canvas);
|
new Project(canvas);
|
||||||
}
|
}
|
||||||
if (code.src) {
|
if (code.src) {
|
||||||
// If we're loading from a source, request that first and then
|
// If we're loading from a source, request that first and then
|
||||||
|
@ -153,8 +153,8 @@ var PaperScript = this.PaperScript = new function() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//#endif // BROWSER
|
//#endif // BROWSER
|
||||||
var doc = scope.document,
|
var proj = scope.project,
|
||||||
view = doc.activeView,
|
view = proj.activeView,
|
||||||
// TODO: Add support for multiple tools
|
// TODO: Add support for multiple tools
|
||||||
tool = scope.tool = /on(?:Key|Mouse)(?:Up|Down|Move|Drag)/.test(code)
|
tool = scope.tool = /on(?:Key|Mouse)(?:Up|Down|Move|Drag)/.test(code)
|
||||||
&& new Tool(null, scope),
|
&& new Tool(null, scope),
|
||||||
|
|
|
@ -18,8 +18,8 @@ var Item = this.Item = Base.extend({
|
||||||
beans: true,
|
beans: true,
|
||||||
|
|
||||||
initialize: function() {
|
initialize: function() {
|
||||||
paper.document.activeLayer.appendTop(this);
|
paper.project.activeLayer.appendTop(this);
|
||||||
this.setStyle(this._document.getCurrentStyle());
|
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,
|
* When passed a project, copies the item to the project,
|
||||||
* or duplicates it within the same document. When passed an item,
|
* or duplicates it within the same project. When passed an item,
|
||||||
* copies the item into the specified 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
|
* @return the new copy of the item
|
||||||
*/
|
*/
|
||||||
copyTo: function(itemOrDocument) {
|
copyTo: function(itemOrProject) {
|
||||||
var copy = this.clone();
|
var copy = this.clone();
|
||||||
if (itemOrDocument.layers) {
|
if (itemOrProject.layers) {
|
||||||
itemOrDocument.activeLayer.appendTop(copy);
|
itemOrProject.activeLayer.appendTop(copy);
|
||||||
} else {
|
} else {
|
||||||
itemOrDocument.appendTop(copy);
|
itemOrProject.appendTop(copy);
|
||||||
}
|
}
|
||||||
return copy;
|
return copy;
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Clones the item within the same document.
|
* Clones the item within the same project.
|
||||||
*
|
*
|
||||||
* @return the newly cloned item
|
* @return the newly cloned item
|
||||||
*/
|
*/
|
||||||
|
@ -127,9 +127,9 @@ var Item = this.Item = Base.extend({
|
||||||
} else {
|
} else {
|
||||||
if ((selected = !!selected) != this._selected) {
|
if ((selected = !!selected) != this._selected) {
|
||||||
// TODO: when an item is removed or moved to another
|
// 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._selected = selected;
|
||||||
this._document._selectItem(this, selected);
|
this._project._selectItem(this, selected);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -147,16 +147,16 @@ var Item = this.Item = Base.extend({
|
||||||
return false;
|
return false;
|
||||||
},
|
},
|
||||||
|
|
||||||
getDocument: function() {
|
getProject: function() {
|
||||||
return this._document;
|
return this._project;
|
||||||
},
|
},
|
||||||
|
|
||||||
_setDocument: function(document) {
|
_setProject: function(project) {
|
||||||
if (this._document != document) {
|
if (this._project != project) {
|
||||||
this._document = document;
|
this._project = project;
|
||||||
if (this._children) {
|
if (this._children) {
|
||||||
for (var i = 0, l = this._children.length; i < l; i++) {
|
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
|
* 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
|
* @param item The item to check against
|
||||||
* @return true if it is above the specified item, false otherwise.
|
* @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
|
* 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
|
* @param item The item to check against
|
||||||
* @return true if it is below the specified item, false otherwise.
|
* @return true if it is below the specified item, false otherwise.
|
||||||
|
@ -491,7 +491,7 @@ var Item = this.Item = Base.extend({
|
||||||
rasterize: function(resolution) {
|
rasterize: function(resolution) {
|
||||||
// TODO: why would we want to pass a size to rasterize? Seems to produce
|
// 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
|
// 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.
|
// question for now.
|
||||||
var bounds = this.getStrokeBounds(),
|
var bounds = this.getStrokeBounds(),
|
||||||
scale = (resolution || 72) / 72,
|
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
|
// TODO: Optimize temporary canvas drawing to ignore parts that are
|
||||||
// outside of the visible view.
|
// outside of the visible view.
|
||||||
draw: function(item, ctx, param) {
|
draw: function(item, ctx, param) {
|
||||||
|
@ -737,7 +737,7 @@ var Item = this.Item = Base.extend({
|
||||||
if (this._children) {
|
if (this._children) {
|
||||||
Base.splice(this._children, [item], top ? undefined : 0, 0);
|
Base.splice(this._children, [item], top ? undefined : 0, 0);
|
||||||
item._parent = this;
|
item._parent = this;
|
||||||
item._setDocument(this._document);
|
item._setProject(this._project);
|
||||||
if (item._name)
|
if (item._name)
|
||||||
item.setName(item._name);
|
item.setName(item._name);
|
||||||
return true;
|
return true;
|
||||||
|
@ -753,7 +753,7 @@ var Item = this.Item = Base.extend({
|
||||||
Base.splice(item._parent._children, [this],
|
Base.splice(item._parent._children, [this],
|
||||||
item._index + (above ? 1 : -1), 0);
|
item._index + (above ? 1 : -1), 0);
|
||||||
this._parent = item._parent;
|
this._parent = item._parent;
|
||||||
this._setDocument(item._document);
|
this._setProject(item._project);
|
||||||
if (item._name)
|
if (item._name)
|
||||||
item.setName(item._name);
|
item.setName(item._name);
|
||||||
return true;
|
return true;
|
||||||
|
|
|
@ -20,43 +20,43 @@ var Layer = this.Layer = Group.extend({
|
||||||
initialize: function() {
|
initialize: function() {
|
||||||
this._children = [];
|
this._children = [];
|
||||||
this._namedChildren = {};
|
this._namedChildren = {};
|
||||||
this._document = paper.document;
|
this._project = paper.project;
|
||||||
// Push it onto document.layers and set index:
|
// Push it onto project.layers and set index:
|
||||||
this._index = this._document.layers.push(this) - 1;
|
this._index = this._project.layers.push(this) - 1;
|
||||||
this.activate();
|
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.
|
* or its parent's children list.
|
||||||
*/
|
*/
|
||||||
_removeFromParent: function() {
|
_removeFromParent: function() {
|
||||||
return this._parent ? this.base()
|
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() {
|
getNextSibling: function() {
|
||||||
return this._parent ? this.base()
|
return this._parent ? this.base()
|
||||||
: this._document.layers[this._index + 1] || null;
|
: this._project.layers[this._index + 1] || null;
|
||||||
},
|
},
|
||||||
|
|
||||||
getPreviousSibling: function() {
|
getPreviousSibling: function() {
|
||||||
return this._parent ? this.base()
|
return this._parent ? this.base()
|
||||||
: this._document.layers[this._index - 1] || null;
|
: this._project.layers[this._index - 1] || null;
|
||||||
},
|
},
|
||||||
|
|
||||||
activate: function() {
|
activate: function() {
|
||||||
this._document.activeLayer = this;
|
this._project.activeLayer = this;
|
||||||
}
|
}
|
||||||
}, new function () {
|
}, new function () {
|
||||||
function move(above) {
|
function move(above) {
|
||||||
return function(item) {
|
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
|
if (item instanceof Layer && !item._parent
|
||||||
&& this._removeFromParent()) {
|
&& this._removeFromParent()) {
|
||||||
Base.splice(item._document.layers, [this],
|
Base.splice(item._project.layers, [this],
|
||||||
item._index + (above ? 1 : -1), 0);
|
item._index + (above ? 1 : -1), 0);
|
||||||
this._setDocument(item._document);
|
this._setProject(item._project);
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
return this.base(item);
|
return this.base(item);
|
||||||
|
|
|
@ -24,9 +24,11 @@ var Raster = this.Raster = Item.extend({
|
||||||
if (object.getContext) {
|
if (object.getContext) {
|
||||||
this.setCanvas(object);
|
this.setCanvas(object);
|
||||||
} else {
|
} else {
|
||||||
|
//#ifdef BROWSER
|
||||||
// If it's a string, get the element with this id first.
|
// If it's a string, get the element with this id first.
|
||||||
if (typeof object === 'string')
|
if (typeof object === 'string')
|
||||||
object = document.getElementById(object);
|
object = document.getElementById(object);
|
||||||
|
//#endif // BROWSER
|
||||||
this.setImage(object);
|
this.setImage(object);
|
||||||
}
|
}
|
||||||
this.matrix = new Matrix();
|
this.matrix = new Matrix();
|
||||||
|
|
|
@ -35,9 +35,9 @@ var sources = [
|
||||||
'src/basic/Matrix.js',
|
'src/basic/Matrix.js',
|
||||||
'src/basic/Line.js',
|
'src/basic/Line.js',
|
||||||
|
|
||||||
'src/document/DocumentView.js',
|
'src/project/ProjectView.js',
|
||||||
'src/document/Document.js',
|
'src/project/Project.js',
|
||||||
'src/document/Symbol.js',
|
'src/project/Symbol.js',
|
||||||
|
|
||||||
'src/item/ChangeFlags.js',
|
'src/item/ChangeFlags.js',
|
||||||
'src/item/Item.js',
|
'src/item/Item.js',
|
||||||
|
@ -93,7 +93,7 @@ if (window.tests) {
|
||||||
'test/tests/Size.js',
|
'test/tests/Size.js',
|
||||||
'test/tests/Rectangle.js',
|
'test/tests/Rectangle.js',
|
||||||
'test/tests/Color.js',
|
'test/tests/Color.js',
|
||||||
'test/tests/Document.js',
|
'test/tests/Project.js',
|
||||||
'test/tests/Item.js',
|
'test/tests/Item.js',
|
||||||
'test/tests/Layer.js',
|
'test/tests/Layer.js',
|
||||||
'test/tests/Group.js',
|
'test/tests/Group.js',
|
||||||
|
|
|
@ -52,9 +52,9 @@ var paper = new function() {
|
||||||
//#include "basic/Matrix.js"
|
//#include "basic/Matrix.js"
|
||||||
//#include "basic/Line.js"
|
//#include "basic/Line.js"
|
||||||
|
|
||||||
//#include "document/DocumentView.js"
|
//#include "project/ProjectView.js"
|
||||||
//#include "document/Document.js"
|
//#include "project/Project.js"
|
||||||
//#include "document/Symbol.js"
|
//#include "project/Symbol.js"
|
||||||
|
|
||||||
//#include "item/ChangeFlags.js"
|
//#include "item/ChangeFlags.js"
|
||||||
//#include "item/Item.js"
|
//#include "item/Item.js"
|
||||||
|
@ -86,6 +86,7 @@ var paper = new function() {
|
||||||
|
|
||||||
//#include "browser/DomElement.js"
|
//#include "browser/DomElement.js"
|
||||||
//#include "browser/DomEvent.js"
|
//#include "browser/DomEvent.js"
|
||||||
|
//#include "browser/Request.js"
|
||||||
|
|
||||||
//#include "ui/Event.js"
|
//#include "ui/Event.js"
|
||||||
//#include "ui/KeyEvent.js"
|
//#include "ui/KeyEvent.js"
|
||||||
|
|
|
@ -287,7 +287,7 @@ var Path = this.Path = PathItem.extend({
|
||||||
var wasSelected = this.isSelected(),
|
var wasSelected = this.isSelected(),
|
||||||
length = this._segments.length;
|
length = this._segments.length;
|
||||||
if (!wasSelected != !selected && length)
|
if (!wasSelected != !selected && length)
|
||||||
this._document._selectItem(this, selected);
|
this._project._selectItem(this, selected);
|
||||||
this._selectedSegmentCount = selected ? length : 0;
|
this._selectedSegmentCount = selected ? length : 0;
|
||||||
for (var i = 0; i < length; i++)
|
for (var i = 0; i < length; i++)
|
||||||
this._segments[i]._selectionState = selected
|
this._segments[i]._selectionState = selected
|
||||||
|
|
|
@ -199,13 +199,13 @@ var Segment = this.Segment = Base.extend({
|
||||||
| (selection[2] ? SelectionState.HANDLE_OUT : 0);
|
| (selection[2] ? SelectionState.HANDLE_OUT : 0);
|
||||||
// If the selection state of the segment has changed, we need to let
|
// If the selection state of the segment has changed, we need to let
|
||||||
// it's path know and possibly add or remove it from
|
// it's path know and possibly add or remove it from
|
||||||
// document._selectedItems
|
// project._selectedItems
|
||||||
if (wasSelected != !!this._selectionState) {
|
if (wasSelected != !!this._selectionState) {
|
||||||
var path = this._path,
|
var path = this._path,
|
||||||
count = path._selectedSegmentCount
|
count = path._selectedSegmentCount
|
||||||
+= this._selectionState ? 1 : -1;
|
+= this._selectionState ? 1 : -1;
|
||||||
if (count <= 1)
|
if (count <= 1)
|
||||||
path._document._selectItem(path, count == 1);
|
path._project._selectItem(path, count == 1);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
137
src/project/Project.js
Normal file
137
src/project/Project.js
Normal 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
341
src/project/ProjectView.js
Normal 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
38
src/project/Symbol.js
Normal 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()
|
||||||
|
});
|
|
@ -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.
|
* fired.
|
||||||
*/
|
*/
|
||||||
getPoint: function() {
|
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.
|
* event was fired.
|
||||||
*/
|
*/
|
||||||
getLastPoint: function() {
|
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.
|
* was last clicked.
|
||||||
*/
|
*/
|
||||||
getDownPoint: function() {
|
getDownPoint: function() {
|
||||||
|
@ -136,7 +136,7 @@ var ToolEvent = this.ToolEvent = Base.extend({
|
||||||
// TODO: implement hitTest first
|
// TODO: implement hitTest first
|
||||||
// getItem: function() {
|
// getItem: function() {
|
||||||
// if (this.item == null) {
|
// if (this.item == null) {
|
||||||
// var result = Document.getActiveDocument().hitTest(this.getPoint());
|
// var result = Project.getActiveProject().hitTest(this.getPoint());
|
||||||
// if (result != null) {
|
// if (result != null) {
|
||||||
// this.item = result.getItem();
|
// this.item = result.getItem();
|
||||||
// // Find group parent
|
// // Find group parent
|
||||||
|
|
|
@ -65,7 +65,7 @@ var Key = this.Key = new function() {
|
||||||
var character = String.fromCharCode(charCode),
|
var character = String.fromCharCode(charCode),
|
||||||
key = keys[keyCode] || character.toLowerCase(),
|
key = keys[keyCode] || character.toLowerCase(),
|
||||||
handler = down ? 'onKeyDown' : 'onKeyUp',
|
handler = down ? 'onKeyDown' : 'onKeyUp',
|
||||||
scope = DocumentView.focused && DocumentView.focused._scope,
|
scope = ProjectView.focused && ProjectView.focused._scope,
|
||||||
tool = scope && scope.tool;
|
tool = scope && scope.tool;
|
||||||
keyMap[key] = down;
|
keyMap[key] = down;
|
||||||
if (tool && tool[handler]) {
|
if (tool && tool[handler]) {
|
||||||
|
|
|
@ -20,9 +20,9 @@ function equals(actual, expected, message) {
|
||||||
|
|
||||||
function test(testName, expected) {
|
function test(testName, expected) {
|
||||||
return QUnit.test(testName, function() {
|
return QUnit.test(testName, function() {
|
||||||
var doc = new Document();
|
var proj = new Project();
|
||||||
expected();
|
expected();
|
||||||
doc.remove();
|
proj.remove();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
module('Document');
|
module('Project');
|
||||||
|
|
||||||
test('activate()', function() {
|
test('activate()', function() {
|
||||||
var doc = new Document();
|
var proj = new Project();
|
||||||
var secondDoc = new Document();
|
var secondDoc = new Project();
|
||||||
doc.activate();
|
proj.activate();
|
||||||
var path = new Path();
|
var path = new Path();
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return doc.activeLayer.children[0] == path;
|
return proj.activeLayer.children[0] == path;
|
||||||
}, true);
|
}, true);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return secondDoc.activeLayer.children.length == 0;
|
return secondDoc.activeLayer.children.length == 0;
|
||||||
|
|
|
@ -3,7 +3,7 @@ module('Group');
|
||||||
test('new Group()', function() {
|
test('new Group()', function() {
|
||||||
var group = new Group();
|
var group = new Group();
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return paper.document.activeLayer.children[0] == group;
|
return paper.project.activeLayer.children[0] == group;
|
||||||
}, true);
|
}, true);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -11,7 +11,7 @@ test('new Group([item])', function() {
|
||||||
var path = new Path();
|
var path = new Path();
|
||||||
var group = new Group([path]);
|
var group = new Group([path]);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return paper.document.activeLayer.children.length;
|
return paper.project.activeLayer.children.length;
|
||||||
}, 1);
|
}, 1);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return group.children[0] == path;
|
return group.children[0] == path;
|
||||||
|
@ -19,7 +19,7 @@ test('new Group([item])', function() {
|
||||||
});
|
});
|
||||||
|
|
||||||
test('Group bounds', function() {
|
test('Group bounds', function() {
|
||||||
paper.document.currentStyle = {
|
paper.project.currentStyle = {
|
||||||
strokeWidth: 5,
|
strokeWidth: 5,
|
||||||
strokeColor: 'black'
|
strokeColor: 'black'
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,15 +1,15 @@
|
||||||
module('Item');
|
module('Item');
|
||||||
|
|
||||||
test('copyTo(document)', function() {
|
test('copyTo(project)', function() {
|
||||||
var doc = paper.document;
|
var proj = paper.project;
|
||||||
var path = new Path();
|
var path = new Path();
|
||||||
var secondDoc = new Document();
|
var secondDoc = new Project();
|
||||||
var copy = path.copyTo(secondDoc);
|
var copy = path.copyTo(secondDoc);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return secondDoc.activeLayer.children.indexOf(copy) != -1;
|
return secondDoc.activeLayer.children.indexOf(copy) != -1;
|
||||||
}, true);
|
}, true);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return doc.activeLayer.children.indexOf(copy) == -1;
|
return proj.activeLayer.children.indexOf(copy) == -1;
|
||||||
}, true);
|
}, true);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return copy != path;
|
return copy != path;
|
||||||
|
@ -17,7 +17,7 @@ test('copyTo(document)', function() {
|
||||||
});
|
});
|
||||||
|
|
||||||
test('copyTo(layer)', function() {
|
test('copyTo(layer)', function() {
|
||||||
var doc = paper.document;
|
var proj = paper.project;
|
||||||
var path = new Path();
|
var path = new Path();
|
||||||
|
|
||||||
var layer = new Layer();
|
var layer = new Layer();
|
||||||
|
@ -26,16 +26,16 @@ test('copyTo(layer)', function() {
|
||||||
return layer.children.indexOf(copy) != -1;
|
return layer.children.indexOf(copy) != -1;
|
||||||
}, true);
|
}, true);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return doc.layers[0].children.indexOf(copy) == -1;
|
return proj.layers[0].children.indexOf(copy) == -1;
|
||||||
}, true);
|
}, true);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('clone()', function() {
|
test('clone()', function() {
|
||||||
var doc = paper.document;
|
var proj = paper.project;
|
||||||
var path = new Path();
|
var path = new Path();
|
||||||
var copy = path.clone();
|
var copy = path.clone();
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return doc.activeLayer.children.length;
|
return proj.activeLayer.children.length;
|
||||||
}, 2);
|
}, 2);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return path != copy;
|
return path != copy;
|
||||||
|
@ -43,28 +43,28 @@ test('clone()', function() {
|
||||||
});
|
});
|
||||||
|
|
||||||
test('appendChild(item)', function() {
|
test('appendChild(item)', function() {
|
||||||
var doc = paper.document;
|
var proj = paper.project;
|
||||||
var path = new Path();
|
var path = new Path();
|
||||||
doc.activeLayer.appendChild(path);
|
proj.activeLayer.appendChild(path);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return doc.activeLayer.children.length;
|
return proj.activeLayer.children.length;
|
||||||
}, 1);
|
}, 1);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('item.parent / item.isChild / item.isParent', function() {
|
test('item.parent / item.isChild / item.isParent', function() {
|
||||||
var doc = paper.document;
|
var proj = paper.project;
|
||||||
var secondDoc = new Document();
|
var secondDoc = new Project();
|
||||||
var path = new Path();
|
var path = new Path();
|
||||||
doc.activeLayer.appendChild(path);
|
proj.activeLayer.appendChild(path);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return doc.activeLayer.children.indexOf(path) != -1;
|
return proj.activeLayer.children.indexOf(path) != -1;
|
||||||
}, true);
|
}, true);
|
||||||
secondDoc.activeLayer.appendTop(path);
|
secondDoc.activeLayer.appendTop(path);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return doc.activeLayer.isChild(path);
|
return proj.activeLayer.isChild(path);
|
||||||
}, false);
|
}, false);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return path.isParent(doc.activeLayer);
|
return path.isParent(proj.activeLayer);
|
||||||
}, false);
|
}, false);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return secondDoc.activeLayer.isChild(path);
|
return secondDoc.activeLayer.isChild(path);
|
||||||
|
@ -73,7 +73,7 @@ test('item.parent / item.isChild / item.isParent', function() {
|
||||||
return path.isParent(secondDoc.activeLayer);
|
return path.isParent(secondDoc.activeLayer);
|
||||||
}, true);
|
}, true);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return doc.activeLayer.children.indexOf(path) == -1;
|
return proj.activeLayer.children.indexOf(path) == -1;
|
||||||
}, true);
|
}, true);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return secondDoc.activeLayer.children.indexOf(path) == 0;
|
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() {
|
test('item.lastChild / item.firstChild', function() {
|
||||||
var doc = paper.document;
|
var proj = paper.project;
|
||||||
var path = new Path();
|
var path = new Path();
|
||||||
var secondPath = new Path();
|
var secondPath = new Path();
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return doc.activeLayer.firstChild == path;
|
return proj.activeLayer.firstChild == path;
|
||||||
}, true);
|
}, true);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return doc.activeLayer.lastChild == secondPath;
|
return proj.activeLayer.lastChild == secondPath;
|
||||||
}, true);
|
}, true);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('appendBottom(item)', function() {
|
test('appendBottom(item)', function() {
|
||||||
var doc = paper.document;
|
var proj = paper.project;
|
||||||
var path = new Path();
|
var path = new Path();
|
||||||
var secondPath = new Path();
|
var secondPath = new Path();
|
||||||
doc.activeLayer.appendBottom(secondPath);
|
proj.activeLayer.appendBottom(secondPath);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return secondPath.index < path.index;
|
return secondPath.index < path.index;
|
||||||
}, true);
|
}, true);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('moveAbove(item)', function() {
|
test('moveAbove(item)', function() {
|
||||||
var doc = paper.document;
|
var proj = paper.project;
|
||||||
var path = new Path();
|
var path = new Path();
|
||||||
var secondPath = new Path();
|
var secondPath = new Path();
|
||||||
path.moveAbove(secondPath);
|
path.moveAbove(secondPath);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return doc.activeLayer.lastChild == path;
|
return proj.activeLayer.lastChild == path;
|
||||||
}, true);
|
}, true);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('moveBelow(item)', function() {
|
test('moveBelow(item)', function() {
|
||||||
var doc = paper.document;
|
var proj = paper.project;
|
||||||
var firstPath = new Path();
|
var firstPath = new Path();
|
||||||
var secondPath = new Path();
|
var secondPath = new Path();
|
||||||
equals(function() {
|
equals(function() {
|
||||||
|
@ -126,33 +126,33 @@ test('moveBelow(item)', function() {
|
||||||
});
|
});
|
||||||
|
|
||||||
test('isDescendant(item) / isAncestor(item)', function() {
|
test('isDescendant(item) / isAncestor(item)', function() {
|
||||||
var doc = paper.document;
|
var proj = paper.project;
|
||||||
var path = new Path();
|
var path = new Path();
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return path.isDescendant(doc.activeLayer);
|
return path.isDescendant(proj.activeLayer);
|
||||||
}, true);
|
}, true);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return doc.activeLayer.isDescendant(path);
|
return proj.activeLayer.isDescendant(path);
|
||||||
}, false);
|
}, false);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return path.isAncestor(doc.activeLayer);
|
return path.isAncestor(proj.activeLayer);
|
||||||
}, false);
|
}, false);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return doc.activeLayer.isAncestor(path);
|
return proj.activeLayer.isAncestor(path);
|
||||||
}, true);
|
}, true);
|
||||||
|
|
||||||
// an item can't be its own descendant:
|
// an item can't be its own descendant:
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return doc.activeLayer.isDescendant(doc.activeLayer);
|
return proj.activeLayer.isDescendant(proj.activeLayer);
|
||||||
}, false);
|
}, false);
|
||||||
// an item can't be its own ancestor:
|
// an item can't be its own ancestor:
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return doc.activeLayer.isAncestor(doc.activeLayer);
|
return proj.activeLayer.isAncestor(proj.activeLayer);
|
||||||
}, false);
|
}, false);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('isGroupedWith', function() {
|
test('isGroupedWith', function() {
|
||||||
var doc = paper.document;
|
var proj = paper.project;
|
||||||
var path = new Path();
|
var path = new Path();
|
||||||
var secondPath = new Path();
|
var secondPath = new Path();
|
||||||
var group = new Group([path]);
|
var group = new Group([path]);
|
||||||
|
@ -180,11 +180,11 @@ test('isGroupedWith', function() {
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return path.isGroupedWith(secondGroup);
|
return path.isGroupedWith(secondGroup);
|
||||||
}, false);
|
}, false);
|
||||||
paper.document.activeLayer.appendTop(path);
|
paper.project.activeLayer.appendTop(path);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return path.isGroupedWith(secondPath);
|
return path.isGroupedWith(secondPath);
|
||||||
}, false);
|
}, false);
|
||||||
paper.document.activeLayer.appendTop(secondPath);
|
paper.project.activeLayer.appendTop(secondPath);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return path.isGroupedWith(secondPath);
|
return path.isGroupedWith(secondPath);
|
||||||
}, false);
|
}, false);
|
||||||
|
@ -205,44 +205,44 @@ test('getPreviousSibling() / getNextSibling()', function() {
|
||||||
});
|
});
|
||||||
|
|
||||||
test('reverseChildren()', function() {
|
test('reverseChildren()', function() {
|
||||||
var doc = paper.document;
|
var proj = paper.project;
|
||||||
var path = new Path();
|
var path = new Path();
|
||||||
var secondPath = new Path();
|
var secondPath = new Path();
|
||||||
var thirdPath = new Path();
|
var thirdPath = new Path();
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return doc.activeLayer.firstChild == path;
|
return proj.activeLayer.firstChild == path;
|
||||||
}, true);
|
}, true);
|
||||||
doc.activeLayer.reverseChildren();
|
proj.activeLayer.reverseChildren();
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return doc.activeLayer.firstChild == path;
|
return proj.activeLayer.firstChild == path;
|
||||||
}, false);
|
}, false);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return doc.activeLayer.firstChild == thirdPath;
|
return proj.activeLayer.firstChild == thirdPath;
|
||||||
}, true);
|
}, true);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return doc.activeLayer.lastChild == path;
|
return proj.activeLayer.lastChild == path;
|
||||||
}, true);
|
}, true);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('Check item#document when moving items across documents', function() {
|
test('Check item#project when moving items across projects', function() {
|
||||||
var doc = paper.document;
|
var proj = paper.project;
|
||||||
var doc1 = new Document();
|
var doc1 = new Project();
|
||||||
var path = new Path();
|
var path = new Path();
|
||||||
var group = new Group();
|
var group = new Group();
|
||||||
group.appendTop(new Path());
|
group.appendTop(new Path());
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return path.document == doc1;
|
return path.project == doc1;
|
||||||
}, true);
|
}, true);
|
||||||
var doc2 = new Document();
|
var doc2 = new Project();
|
||||||
doc2.activeLayer.appendTop(path);
|
doc2.activeLayer.appendTop(path);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return path.document == doc2;
|
return path.project == doc2;
|
||||||
}, true);
|
}, true);
|
||||||
|
|
||||||
doc2.activeLayer.appendTop(group);
|
doc2.activeLayer.appendTop(group);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return group.children[0].document == doc2;
|
return group.children[0].project == doc2;
|
||||||
}, true);
|
}, true);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -281,26 +281,26 @@ test('Check parent children object for named item', function() {
|
||||||
var path = new Path();
|
var path = new Path();
|
||||||
path.name = 'test';
|
path.name = 'test';
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return paper.document.activeLayer.children['test'] == path;
|
return paper.project.activeLayer.children['test'] == path;
|
||||||
}, true);
|
}, true);
|
||||||
|
|
||||||
var path2 = new Path();
|
var path2 = new Path();
|
||||||
path2.name = 'test';
|
path2.name = 'test';
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return paper.document.activeLayer.children['test'] == path2;
|
return paper.project.activeLayer.children['test'] == path2;
|
||||||
}, true);
|
}, true);
|
||||||
|
|
||||||
path2.remove();
|
path2.remove();
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return paper.document.activeLayer.children['test'] == path;
|
return paper.project.activeLayer.children['test'] == path;
|
||||||
}, true);
|
}, true);
|
||||||
|
|
||||||
path.remove();
|
path.remove();
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return !paper.document.activeLayer.children['test'];
|
return !paper.project.activeLayer.children['test'];
|
||||||
}, true);
|
}, true);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -314,7 +314,7 @@ test('Named child access', function() {
|
||||||
path.remove();
|
path.remove();
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return paper.document.activeLayer.children['test'] == path2;
|
return paper.project.activeLayer.children['test'] == path2;
|
||||||
}, true);
|
}, true);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -328,21 +328,21 @@ test('Named child access 2', function() {
|
||||||
path.remove();
|
path.remove();
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return paper.document.activeLayer.children['test'] == path2;
|
return paper.project.activeLayer.children['test'] == path2;
|
||||||
}, true);
|
}, true);
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return paper.document.activeLayer._namedChildren['test'].length == 1;
|
return paper.project.activeLayer._namedChildren['test'].length == 1;
|
||||||
}, true);
|
}, true);
|
||||||
|
|
||||||
path2.remove();
|
path2.remove();
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return !paper.document.activeLayer._namedChildren['test'];
|
return !paper.project.activeLayer._namedChildren['test'];
|
||||||
}, true);
|
}, true);
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return paper.document.activeLayer.children['test'] === undefined;
|
return paper.project.activeLayer.children['test'] === undefined;
|
||||||
}, true);
|
}, true);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -358,11 +358,11 @@ test('Named child access 2', function() {
|
||||||
group.appendTop(path2);
|
group.appendTop(path2);
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return paper.document.activeLayer.children['test'] == path;
|
return paper.project.activeLayer.children['test'] == path;
|
||||||
}, true);
|
}, true);
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return paper.document.activeLayer._namedChildren['test'].length == 1;
|
return paper.project.activeLayer._namedChildren['test'].length == 1;
|
||||||
}, true);
|
}, true);
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
|
@ -373,14 +373,14 @@ test('Named child access 2', function() {
|
||||||
return group._namedChildren['test'].length == 1;
|
return group._namedChildren['test'].length == 1;
|
||||||
}, true);
|
}, true);
|
||||||
|
|
||||||
paper.document.activeLayer.appendTop(path2);
|
paper.project.activeLayer.appendTop(path2);
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return group._namedChildren['test'] === undefined;
|
return group._namedChildren['test'] === undefined;
|
||||||
}, true);
|
}, true);
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return paper.document.activeLayer._namedChildren['test'].length == 2;
|
return paper.project.activeLayer._namedChildren['test'].length == 2;
|
||||||
}, true);
|
}, true);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -392,19 +392,19 @@ test('Setting name of child back to null', function() {
|
||||||
path2.name = 'test';
|
path2.name = 'test';
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return paper.document.activeLayer.children['test'] == path2;
|
return paper.project.activeLayer.children['test'] == path2;
|
||||||
}, true);
|
}, true);
|
||||||
|
|
||||||
path2.name = null;
|
path2.name = null;
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return paper.document.activeLayer.children['test'] == path;
|
return paper.project.activeLayer.children['test'] == path;
|
||||||
}, true);
|
}, true);
|
||||||
|
|
||||||
path.name = null;
|
path.name = null;
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return paper.document.activeLayer.children['test'] === undefined;
|
return paper.project.activeLayer.children['test'] === undefined;
|
||||||
}, true);
|
}, true);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -415,10 +415,10 @@ test('Renaming item', function() {
|
||||||
path.name = 'test2';
|
path.name = 'test2';
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return paper.document.activeLayer.children['test'] === undefined;
|
return paper.project.activeLayer.children['test'] === undefined;
|
||||||
}, true);
|
}, true);
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return paper.document.activeLayer.children['test2'] == path;
|
return paper.project.activeLayer.children['test2'] == path;
|
||||||
}, true);
|
}, true);
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
module('Layer');
|
module('Layer');
|
||||||
|
|
||||||
test('previousSibling / nextSibling', function() {
|
test('previousSibling / nextSibling', function() {
|
||||||
var doc = paper.document;
|
var proj = paper.project;
|
||||||
var firstLayer = doc.activeLayer;
|
var firstLayer = proj.activeLayer;
|
||||||
var secondLayer = new Layer();
|
var secondLayer = new Layer();
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return secondLayer.previousSibling == firstLayer;
|
return secondLayer.previousSibling == firstLayer;
|
||||||
|
@ -30,18 +30,18 @@ test('previousSibling / nextSibling', function() {
|
||||||
return thirdLayer.previousSibling == path;
|
return thirdLayer.previousSibling == path;
|
||||||
}, true);
|
}, true);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return doc.layers.length == 2;
|
return proj.layers.length == 2;
|
||||||
}, true);
|
}, true);
|
||||||
|
|
||||||
firstLayer.appendTop(secondLayer);
|
firstLayer.appendTop(secondLayer);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return doc.layers.length == 1;
|
return proj.layers.length == 1;
|
||||||
}, true);
|
}, true);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('moveAbove / moveBelow', function() {
|
test('moveAbove / moveBelow', function() {
|
||||||
var doc = paper.document;
|
var proj = paper.project;
|
||||||
var firstLayer = doc.activeLayer;
|
var firstLayer = proj.activeLayer;
|
||||||
var secondLayer = new Layer();
|
var secondLayer = new Layer();
|
||||||
secondLayer.moveBelow(firstLayer);
|
secondLayer.moveBelow(firstLayer);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
|
@ -64,6 +64,6 @@ test('moveAbove / moveBelow', function() {
|
||||||
}, true);
|
}, true);
|
||||||
// There should now only be one layer left:
|
// There should now only be one layer left:
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return doc.layers.length;
|
return proj.layers.length;
|
||||||
}, 1);
|
}, 1);
|
||||||
});
|
});
|
|
@ -12,7 +12,7 @@ test('path.join(path)', function() {
|
||||||
path.join(path2);
|
path.join(path2);
|
||||||
equals(path.segments.toString(), '{ point: { x: 0, y: 0 } },{ point: { x: 10, y: 0 } },{ point: { x: 20, y: 10 } }');
|
equals(path.segments.toString(), '{ point: { x: 0, y: 0 } },{ point: { x: 10, y: 0 } },{ point: { x: 20, y: 10 } }');
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return paper.document.activeLayer.children.length;
|
return paper.project.activeLayer.children.length;
|
||||||
}, 1);
|
}, 1);
|
||||||
|
|
||||||
var path = new Path();
|
var path = new Path();
|
||||||
|
@ -78,7 +78,7 @@ test('path.remove()', function() {
|
||||||
path.remove();
|
path.remove();
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return paper.document.activeLayer.children.length;
|
return paper.project.activeLayer.children.length;
|
||||||
}, 0);
|
}, 0);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -90,7 +90,7 @@ test('Is the path deselected after setting a new list of segments?', function()
|
||||||
return path.selected;
|
return path.selected;
|
||||||
}, true);
|
}, true);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return paper.document.selectedItems.length;
|
return paper.project.selectedItems.length;
|
||||||
}, 1);
|
}, 1);
|
||||||
|
|
||||||
path.segments = [[0, 10]];
|
path.segments = [[0, 10]];
|
||||||
|
@ -98,7 +98,7 @@ test('Is the path deselected after setting a new list of segments?', function()
|
||||||
return path.selected;
|
return path.selected;
|
||||||
}, false);
|
}, false);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return paper.document.selectedItems.length;
|
return paper.project.selectedItems.length;
|
||||||
}, 0);
|
}, 0);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -1,18 +1,18 @@
|
||||||
module('Path Style');
|
module('Path Style');
|
||||||
|
|
||||||
test('currentStyle', function() {
|
test('currentStyle', function() {
|
||||||
paper.document.currentStyle.fillColor = 'black';
|
paper.project.currentStyle.fillColor = 'black';
|
||||||
var path = new Path();
|
var path = new Path();
|
||||||
compareRGBColors(path.fillColor, 'black', 'path.fillColor');
|
compareRGBColors(path.fillColor, 'black', 'path.fillColor');
|
||||||
|
|
||||||
// When changing the current style of the document, the style of
|
// When changing the current style of the project, the style of
|
||||||
// paths created using document.currentStyle should not change.
|
// paths created using project.currentStyle should not change.
|
||||||
paper.document.currentStyle.fillColor = 'red';
|
paper.project.currentStyle.fillColor = 'red';
|
||||||
compareRGBColors(path.fillColor, 'black', 'path.fillColor');
|
compareRGBColors(path.fillColor, 'black', 'path.fillColor');
|
||||||
});
|
});
|
||||||
|
|
||||||
test('setting currentStyle to an object', function() {
|
test('setting currentStyle to an object', function() {
|
||||||
paper.document.currentStyle = {
|
paper.project.currentStyle = {
|
||||||
fillColor: 'red',
|
fillColor: 'red',
|
||||||
strokeColor: 'green'
|
strokeColor: 'green'
|
||||||
};
|
};
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue