2011-03-06 19:50:44 -05:00
|
|
|
/*
|
2013-01-28 21:03:27 -05:00
|
|
|
* Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
|
2011-03-07 20:41:50 -05:00
|
|
|
* http://paperjs.org/
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2013-01-28 21:03:27 -05:00
|
|
|
* Copyright (c) 2011 - 2013, Juerg Lehni & Jonathan Puckey
|
2011-03-06 19:50:44 -05:00
|
|
|
* http://lehni.org/ & http://jonathanpuckey.com/
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-07-01 06:17:45 -04:00
|
|
|
* Distributed under the MIT license. See LICENSE file for details.
|
|
|
|
*
|
2011-03-07 20:41:50 -05:00
|
|
|
* All rights reserved.
|
2011-03-06 19:50:44 -05:00
|
|
|
*/
|
|
|
|
|
2011-06-22 18:56:05 -04:00
|
|
|
/**
|
|
|
|
* @name Layer
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-06-22 18:56:05 -04:00
|
|
|
* @class The Layer item represents a layer in a Paper.js project.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-06-22 18:56:05 -04:00
|
|
|
* The layer which is currently active can be accessed through
|
|
|
|
* {@link Project#activeLayer}.
|
|
|
|
* An array of all layers in a project can be accessed through
|
|
|
|
* {@link Project#layers}.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-06-22 18:56:05 -04:00
|
|
|
* @extends Group
|
|
|
|
*/
|
|
|
|
var Layer = this.Layer = Group.extend(/** @lends Layer# */{
|
2013-04-06 03:16:08 -04:00
|
|
|
_class: 'Layer',
|
2011-05-23 11:00:37 -04:00
|
|
|
// DOCS: improve constructor code example.
|
|
|
|
/**
|
|
|
|
* Creates a new Layer item and places it at the end of the
|
2011-05-27 07:28:13 -04:00
|
|
|
* {@link Project#layers} array. The newly created layer will be activated,
|
|
|
|
* so all newly created items will be placed within it.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2013-03-16 09:03:13 -04:00
|
|
|
* @name Layer#initialize
|
2011-06-30 06:01:51 -04:00
|
|
|
* @param {Item[]} [children] An array of items that will be added to the
|
2011-06-19 16:52:52 -04:00
|
|
|
* newly created layer.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-30 13:42:17 -04:00
|
|
|
* @example
|
|
|
|
* var layer = new Layer();
|
2011-05-23 11:00:37 -04:00
|
|
|
*/
|
2013-03-16 09:03:13 -04:00
|
|
|
/**
|
|
|
|
* Creates a new Layer item and places it at the end of the
|
|
|
|
* {@link Project#layers} array. The newly created layer will be activated,
|
|
|
|
* so all newly created items will be placed within it.
|
|
|
|
*
|
|
|
|
* @param {Object} properties An object literal containing properties to
|
|
|
|
* be set on the layer.
|
|
|
|
*
|
|
|
|
* @example {@paperscript}
|
|
|
|
* var path = new Path([100, 100], [100, 200]);
|
|
|
|
* var path2 = new Path([50, 150], [150, 150]);
|
|
|
|
*
|
|
|
|
* // Create a layer. The properties in the object literal
|
|
|
|
* // are set on the newly created layer.
|
|
|
|
* var layer = new Layer({
|
|
|
|
* children: [path, path2],
|
|
|
|
* strokeColor: 'black',
|
|
|
|
* position: view.center
|
|
|
|
* });
|
|
|
|
*/
|
2011-05-20 20:05:22 -04:00
|
|
|
initialize: function(items) {
|
2011-05-16 08:33:15 -04:00
|
|
|
this._project = paper.project;
|
|
|
|
// Push it onto project.layers and set index:
|
|
|
|
this._index = this._project.layers.push(this) - 1;
|
2011-06-20 09:37:09 -04:00
|
|
|
this.base.apply(this, arguments);
|
2011-02-12 10:20:10 -05:00
|
|
|
this.activate();
|
|
|
|
},
|
2011-02-15 19:18:58 -05:00
|
|
|
|
2011-02-16 12:55:12 -05:00
|
|
|
/**
|
2011-05-16 08:33:15 -04:00
|
|
|
* Removes the layer from its project's layers list
|
2011-02-16 12:55:12 -05:00
|
|
|
* or its parent's children list.
|
|
|
|
*/
|
2013-01-20 17:01:27 -05:00
|
|
|
_remove: function(notify) {
|
2011-06-19 12:30:47 -04:00
|
|
|
if (this._parent)
|
2013-01-20 17:01:27 -05:00
|
|
|
return this.base(notify);
|
2011-06-19 12:30:47 -04:00
|
|
|
if (this._index != null) {
|
|
|
|
Base.splice(this._project.layers, null, this._index, 1);
|
2011-06-30 06:01:51 -04:00
|
|
|
// Tell project we need a redraw. This is similar to _changed()
|
2011-06-19 18:03:18 -04:00
|
|
|
// mechanism.
|
|
|
|
this._project._needsRedraw();
|
2011-06-19 12:30:47 -04:00
|
|
|
return true;
|
|
|
|
}
|
|
|
|
return false;
|
2011-02-16 12:55:12 -05:00
|
|
|
},
|
2011-03-03 17:45:17 -05:00
|
|
|
|
2011-02-16 12:55:12 -05:00
|
|
|
getNextSibling: function() {
|
2011-05-14 12:56:14 -04:00
|
|
|
return this._parent ? this.base()
|
2011-05-16 08:33:15 -04:00
|
|
|
: this._project.layers[this._index + 1] || null;
|
2011-02-16 12:55:12 -05:00
|
|
|
},
|
2011-03-03 17:45:17 -05:00
|
|
|
|
2011-02-16 12:55:12 -05:00
|
|
|
getPreviousSibling: function() {
|
2011-05-14 12:56:14 -04:00
|
|
|
return this._parent ? this.base()
|
2011-05-16 08:33:15 -04:00
|
|
|
: this._project.layers[this._index - 1] || null;
|
2011-02-16 12:55:12 -05:00
|
|
|
},
|
2011-02-15 19:18:58 -05:00
|
|
|
|
2013-01-20 18:56:58 -05:00
|
|
|
isInserted: function() {
|
|
|
|
return this._index != null;
|
|
|
|
},
|
|
|
|
|
2011-05-23 11:00:37 -04:00
|
|
|
/**
|
|
|
|
* Activates the layer.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-23 11:00:37 -04:00
|
|
|
* @example
|
2011-11-12 12:30:21 -05:00
|
|
|
* var firstLayer = project.activeLayer;
|
|
|
|
* var secondLayer = new Layer();
|
|
|
|
* console.log(project.activeLayer == secondLayer); // true
|
|
|
|
* firstLayer.activate();
|
|
|
|
* console.log(project.activeLayer == firstLayer); // true
|
2011-05-23 11:00:37 -04:00
|
|
|
*/
|
2011-02-12 10:20:10 -05:00
|
|
|
activate: function() {
|
2011-05-16 08:33:15 -04:00
|
|
|
this._project.activeLayer = this;
|
2011-02-11 12:37:36 -05:00
|
|
|
}
|
2011-03-04 20:53:32 -05:00
|
|
|
}, new function () {
|
2011-06-19 13:50:23 -04:00
|
|
|
function insert(above) {
|
2011-03-04 20:53:32 -05:00
|
|
|
return function(item) {
|
2011-06-19 12:30:47 -04:00
|
|
|
// If the item is a layer and contained within Project#layers, use
|
|
|
|
// our own version of move().
|
2011-05-14 12:56:14 -04:00
|
|
|
if (item instanceof Layer && !item._parent
|
2013-01-20 17:01:27 -05:00
|
|
|
&& this._remove(true)) {
|
2011-05-16 08:33:15 -04:00
|
|
|
Base.splice(item._project.layers, [this],
|
2012-11-19 23:41:04 -05:00
|
|
|
item._index + (above ? 1 : 0), 0);
|
2011-05-16 08:33:15 -04:00
|
|
|
this._setProject(item._project);
|
2011-03-04 20:53:32 -05:00
|
|
|
return true;
|
|
|
|
}
|
2011-05-07 12:27:19 -04:00
|
|
|
return this.base(item);
|
2011-05-02 06:23:42 -04:00
|
|
|
};
|
2011-03-04 20:53:32 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
2011-06-19 13:50:23 -04:00
|
|
|
insertAbove: insert(true),
|
2011-06-17 10:58:22 -04:00
|
|
|
|
2011-06-19 13:50:23 -04:00
|
|
|
insertBelow: insert(false)
|
2011-03-04 20:53:32 -05:00
|
|
|
};
|
2011-02-13 11:26:24 -05:00
|
|
|
});
|