2011-05-16 08:33:15 -04:00
|
|
|
/*
|
|
|
|
* 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({
|
2011-05-23 12:13:03 -04:00
|
|
|
/** @lends Project# */
|
|
|
|
|
2011-05-16 08:33:15 -04:00
|
|
|
beans: true,
|
|
|
|
|
2011-05-17 08:25:46 -04:00
|
|
|
// TODO: Add arguments to define pages
|
2011-05-23 12:13:03 -04:00
|
|
|
// DOCS: document Project constructor and class
|
|
|
|
/**
|
|
|
|
* Creates a Paper.js project
|
|
|
|
*
|
|
|
|
* @name Project
|
|
|
|
* @constructor
|
|
|
|
*
|
|
|
|
* @class The Project item refers to..
|
|
|
|
*
|
|
|
|
* The currently active project can be accessed through the global {@code
|
|
|
|
* project} variable.
|
|
|
|
*
|
|
|
|
* An array of all open projects is accessible through the global {@code
|
|
|
|
* projects} variable.
|
|
|
|
*/
|
2011-05-17 08:25:46 -04:00
|
|
|
initialize: function() {
|
2011-05-16 08:33:15 -04:00
|
|
|
// 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;
|
2011-05-20 20:05:22 -04:00
|
|
|
this._currentStyle = PathStyle.create(null);
|
|
|
|
this._selectedItems = {};
|
|
|
|
this._selectedItemCount = 0;
|
2011-05-16 08:33:15 -04:00
|
|
|
// Activate straight away so paper.project is set, as required by
|
|
|
|
// Layer and DoumentView constructors.
|
|
|
|
this.activate();
|
|
|
|
this.layers = [];
|
|
|
|
this.symbols = [];
|
|
|
|
this.activeLayer = new Layer();
|
|
|
|
},
|
|
|
|
|
2011-05-23 12:13:03 -04:00
|
|
|
/**
|
|
|
|
* The currently active path style. All selected items and newly
|
|
|
|
* created items will be styled with this style.
|
|
|
|
*
|
|
|
|
* @type PathStyle
|
|
|
|
* @bean
|
|
|
|
*/
|
2011-05-16 08:33:15 -04:00
|
|
|
getCurrentStyle: function() {
|
|
|
|
return this._currentStyle;
|
|
|
|
},
|
|
|
|
|
2011-05-23 12:13:03 -04:00
|
|
|
// TODO: style selected items with the style:
|
2011-05-16 08:33:15 -04:00
|
|
|
setCurrentStyle: function(style) {
|
2011-05-16 14:21:36 -04:00
|
|
|
this._currentStyle.initialize(style);
|
2011-05-16 08:33:15 -04:00
|
|
|
},
|
|
|
|
|
2011-05-23 12:13:03 -04:00
|
|
|
/**
|
|
|
|
* Activates this project, so all newly created items will be placed
|
|
|
|
* in it.
|
|
|
|
*/
|
2011-05-16 08:33:15 -04:00
|
|
|
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;
|
|
|
|
return !!res.length;
|
|
|
|
},
|
|
|
|
|
2011-05-23 12:13:03 -04:00
|
|
|
/**
|
|
|
|
* The index of the project in the global projects array.
|
|
|
|
*
|
|
|
|
* @type number
|
|
|
|
* @bean
|
|
|
|
*/
|
2011-05-16 08:33:15 -04:00
|
|
|
getIndex: function() {
|
|
|
|
return this._index;
|
|
|
|
},
|
|
|
|
|
2011-05-23 12:13:03 -04:00
|
|
|
/**
|
|
|
|
* The selected items contained within the project.
|
|
|
|
*
|
|
|
|
* @type array
|
|
|
|
* @bean
|
|
|
|
*/
|
2011-05-16 08:33:15 -04:00
|
|
|
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() {
|
|
|
|
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);
|
|
|
|
},
|
2011-05-25 18:54:25 -04:00
|
|
|
|
|
|
|
/**
|
|
|
|
* {@grouptitle Project Hierarchy}
|
|
|
|
*
|
2011-05-25 18:57:58 -04:00
|
|
|
* The layers contained within the project.
|
2011-05-25 18:54:25 -04:00
|
|
|
*
|
|
|
|
* @name Project#layers
|
|
|
|
* @type array
|
|
|
|
*/
|
|
|
|
|
|
|
|
/**
|
2011-05-25 18:57:58 -04:00
|
|
|
* The layer which is currently active. New items will be created on this
|
2011-05-25 18:54:25 -04:00
|
|
|
* layer by default.
|
|
|
|
*
|
|
|
|
* @name Project#activeLayer
|
|
|
|
* @type Layer
|
|
|
|
*/
|
|
|
|
|
|
|
|
/**
|
2011-05-25 18:57:58 -04:00
|
|
|
* The symbols contained within the project.
|
2011-05-25 18:54:25 -04:00
|
|
|
*
|
|
|
|
* @name Project#symbols
|
|
|
|
* @type array
|
|
|
|
*/
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The views contained within the project.
|
|
|
|
*
|
|
|
|
* @name Project#views
|
|
|
|
* @type array
|
|
|
|
*/
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The view which is currently active.
|
|
|
|
*
|
|
|
|
* @name Project#activeView
|
|
|
|
* @type View
|
|
|
|
*/
|
|
|
|
|
2011-05-16 08:33:15 -04:00
|
|
|
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();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2011-05-17 08:25:46 -04:00
|
|
|
/**
|
|
|
|
* @deprecated
|
2011-05-23 12:13:03 -04:00
|
|
|
* @ignore
|
2011-05-17 08:25:46 -04:00
|
|
|
*/
|
2011-05-16 08:33:15 -04:00
|
|
|
redraw: function() {
|
2011-05-17 08:25:46 -04:00
|
|
|
this._scope.view.draw();
|
2011-05-16 08:33:15 -04:00
|
|
|
}
|
|
|
|
});
|