scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-03 19:45:44 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Reuse PaperScope objects when associating multiple scripts with the same canvas.

Browse source 
Closes #504.
This commit is contained in:
Jürg Lehni 2014-07-26 12:03:34 +02:00
parent e0ec2bf2c3
commit 0198f4c45f
3 changed files with 88 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/core/PaperScope.js
View file

@ -42,8 +42,8 @@ var PaperScope = Base.extend(/** @lends PaperScope# */{
* @function
*/
// DOCS: initialize() parameters
initialize: function PaperScope(script) {
// script is only used internally, when creating scopes for PaperScript.
initialize: function PaperScope() {
// element is only used internally when creating scopes for PaperScript.
// Whenever a PaperScope is created, it automatically becomes the active
// one.
paper = this;
@ -57,15 +57,8 @@ var PaperScope = Base.extend(/** @lends PaperScope# */{
this.projects = [];
this.tools = [];
this.palettes = [];
// Assign an id to this canvas that's either extracted from the script
// or automatically generated.
this._id = script && (script.getAttribute('id') || script.src)
|| ('paperscope-' + (PaperScope._id++));
// Make sure the script tag also has this id now. If it already had an
// id, we're not changing it, since it's the first option we're
// trying to get an id from above.
if (script)
script.setAttribute('id', this._id);
// Assign a unique id to each scope .
this._id = PaperScope._id++;
PaperScope._scopes[this._id] = this;
if (!this.support) {
// Set up paper.support, as an object containing properties that
@ -189,15 +182,18 @@ var PaperScope = Base.extend(/** @lends PaperScope# */{
* Sets up an empty project for us. If a canvas is provided, it also creates
* a {@link View} for it, both linked to this scope.
*
* @param {HTMLCanvasElement} canvas The canvas this scope should be
* @param {HTMLCanvasElement} element the HTML canvas this scope should be
* associated with.
*/
setup: function(canvas) {
// Create an empty project for the scope.
setup: function(element) {
// Make sure this is the active scope, so the created project and view
// are automatically associated with it.
paper = this;
this.project = new Project(canvas);
// Link the element to this scope, so we can reuse the scope when
// compiling multiple scripts for the same element.
element.setAttribute('data-paper-scope', this._id);
// Create an empty project for the scope.
this.project = new Project(element);
// This is needed in PaperScript.load().
return this;
},
@ -247,9 +243,9 @@ var PaperScope = Base.extend(/** @lends PaperScope# */{
* @param id
*/
get: function(id) {
// If a script tag is passed, get the id from it.
// If an element is passed, get the id from it.
if (id && id.getAttribute)
id = id.getAttribute('id');
id = id.getAttribute('data-paper-scope');
return this._scopes[id] || null;
},

11
src/core/PaperScript.js
View file

@ -443,12 +443,13 @@ Base.exports.PaperScript = (function() {
// If a canvas id is provided, pass it on to the PaperScope
// so a project is created for it now.
var canvas = PaperScope.getAttribute(script, 'canvas'),
// See if there already is a scope for this canvas and reuse
// it, to support multiple scripts per canvas. Otherwise
// create a new one.
scope = PaperScope.get(canvas)
|| new PaperScope(script).setup(canvas),
src = script.src;
canvas = document.getElementById(canvas) || canvas;
// See if there already is a scope for this canvas and reuse
// it, to support multiple scripts per canvas. Otherwise
// create a new one.
var scope = PaperScope.get(canvas)
|| new PaperScope().setup(canvas);
if (src) {
// If we're loading from a source, request that first and
// then run later.

138
src/project/Project.js
View file

@ -43,7 +43,7 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
* Note that when working with PaperScript, a project is automatically
* created for us and the {@link PaperScope#project} variable points to it.
*
* @param {HTMLCanvasElement} element an HTML anvas element that should be
* @param {HTMLCanvasElement} element the HTML canvas element that should be
* used as the element for the view.
*/
initialize: function Project(element) {
@ -317,9 +317,9 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
* Fetch items contained within the project whose properties match the
* criteria in the specified object.
* Extended matching is possible by providing a compare function or
* regular expression. Matching points, colors only work as a comparison
* regular expression. Matching points, colors only work as a comparison
* of the full object, not partial matching (e.g. only providing the x-
* coordinate to match all points with that x-value). Partial matching
* coordinate to match all points with that x-value). Partial matching
* does work for {@link Item#data}.
*
* @example {@paperscript} // Fetch all selected path items:
@ -328,22 +328,22 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
* radius: 25,
* fillColor: 'black'
* });
*
*
* var path2 = new Path.Circle({
* center: [150, 50],
* radius: 25,
* fillColor: 'black'
* });
*
*
* // Select path2:
* path2.selected = true;
*
*
* // Fetch all selected path items:
* var items = project.getItems({
* selected: true,
* class: Path
* });
*
*
* // Change the fill color of the selected path to red:
* items[0].fillColor = 'red';
*
@ -353,51 +353,51 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
* radius: 25,
* fillColor: 'black'
* });
*
*
* var path2 = new Path.Circle({
* center: [150, 50],
* radius: 25,
* fillColor: 'purple'
* });
*
*
* // Fetch all items with a purple fill color:
* var items = project.getItems({
* fillColor: 'purple'
* });
*
*
* // Select the fetched item:
* items[0].selected = true;
*
*
* @example {@paperscript} // Fetch items at a specific position:
* var path1 = new Path.Circle({
* center: [50, 50],
* radius: 25,
* fillColor: 'black'
* });
*
*
* var path2 = new Path.Circle({
* center: [150, 50],
* radius: 25,
* fillColor: 'black'
* });
*
*
* // Fetch all path items positioned at {x: 150, y: 150}:
* var items = project.getItems({
* position: [150, 50]
* });
*
*
* // Select the fetched path:
* items[0].selected = true;
*
*
* @example {@paperscript} // Fetch items using a comparing function:
*
*
* // Create a circle shaped path:
* var path1 = new Path.Circle({
* center: [50, 50],
* radius: 25,
* fillColor: 'black'
* });
*
*
* // Create a circle shaped path with 50% opacity:
* var path2 = new Path.Circle({
* center: [150, 50],
@ -405,19 +405,19 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
* fillColor: 'black',
* opacity: 0.5
* });
*
*
* // Fetch all items whose opacity is smaller than 1
* var items = paper.project.getItems({
* opacity: function(value) {
* return value < 1;
* }
* });
*
*
* // Select the fetched item:
* items[0].selected = true;
*
* @example {@paperscript} // Fetch items using a comparing function (2):
*
*
* // Create a rectangle shaped path (4 segments):
* var path1 = new Path.Rectangle({
* from: [25, 25],
@ -425,7 +425,7 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
* strokeColor: 'black',
* strokeWidth: 10
* });
*
*
* // Create a line shaped path (2 segments):
* var path2 = new Path.Line({
* from: [125, 50],
@ -433,7 +433,7 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
* strokeColor: 'black',
* strokeWidth: 10
* });
*
*
* // Fetch all paths with 2 segments:
* var items = project.getItems({
* class: Path,
@ -441,12 +441,12 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
* return segments.length == 2;
* }
* });
*
*
* // Select the fetched path:
* items[0].selected = true;
*
*
* @example {@paperscript} // Match (nested) properties of the data property:
*
*
* // Create a black circle shaped path:
* var path1 = new Path.Circle({
* center: [50, 50],
@ -460,7 +460,7 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
* }
* }
* });
*
*
* // Create a red circle shaped path:
* var path2 = new Path.Circle({
* center: [150, 50],
@ -474,7 +474,7 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
* }
* }
* });
*
*
* // Fetch all items whose data object contains a person
* // object whose name is john and length is 180:
* var items = paper.project.getItems({
@ -485,12 +485,12 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
* }
* }
* });
*
*
* // Select the fetched item:
* items[0].selected = true;
*
*
* @example {@paperscript} // Match strings using regular expressions:
*
*
* // Create a path named 'aardvark':
* var path1 = new Path.Circle({
* center: [50, 50],
@ -498,7 +498,7 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
* fillColor: 'black',
* name: 'aardvark'
* });
*
*
* // Create a path named 'apple':
* var path2 = new Path.Circle({
* center: [150, 50],
@ -506,7 +506,7 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
* fillColor: 'black',
* name: 'apple'
* });
*
*
* // Create a path named 'banana':
* var path2 = new Path.Circle({
* center: [250, 50],
@ -514,17 +514,17 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
* fillColor: 'black',
* name: 'banana'
* });
*
*
* // Fetch all items that have a name starting with 'a':
* var items = project.getItems({
* name: /^a/
* });
*
*
* // Change the fill color of the matched items:
* for (var i = 0; i < items.length; i++) {
* items[i].fillColor = 'red';
* }
*
*
* @param {Object} match The criteria to match against.
* @return {Item[]}
*/
@ -533,12 +533,12 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
},
/**
* Fetch the first item contained within the project whose properties
* Fetch the first item contained within the project whose properties
* match the criteria in the specified object.
* Extended matching is possible by providing a compare function or
* regular expression. Matching points, colors only work as a comparison
* regular expression. Matching points, colors only work as a comparison
* of the full object, not partial matching (e.g. only providing the x-
* coordinate to match all points with that x-value). Partial matching
* coordinate to match all points with that x-value). Partial matching
* does work for {@link Item#data}.
*
* @example {@paperscript} // Fetch all selected path items:
@ -547,22 +547,22 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
* radius: 25,
* fillColor: 'black'
* });
*
*
* var path2 = new Path.Circle({
* center: [150, 50],
* radius: 25,
* fillColor: 'black'
* });
*
*
* // Select path2:
* path2.selected = true;
*
*
* // Fetch first select path items:
* var item = project.getItem({
* selected: true,
* class: Path
* });
*
*
* // Change the fill color of the selected path to red:
* item.fillColor = 'red';
*
@ -572,51 +572,51 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
* radius: 25,
* fillColor: 'black'
* });
*
*
* var path2 = new Path.Circle({
* center: [150, 50],
* radius: 25,
* fillColor: 'purple'
* });
*
*
* // Fetch first item with a purple fill color:
* var item = project.getItem({
* fillColor: 'purple'
* });
*
*
* // Select the fetched item:
* item.selected = true;
*
*
* @example {@paperscript} // Fetch item at a specific position:
* var path1 = new Path.Circle({
* center: [50, 50],
* radius: 25,
* fillColor: 'black'
* });
*
*
* var path2 = new Path.Circle({
* center: [150, 50],
* radius: 25,
* fillColor: 'black'
* });
*
*
* // Fetch path item positioned at {x: 150, y: 150}:
* var item = project.getItem({
* position: [150, 50]
* });
*
*
* // Select the fetched path:
* item.selected = true;
*
*
* @example {@paperscript} // Fetch item using a comparing function:
*
*
* // Create a circle shaped path:
* var path1 = new Path.Circle({
* center: [50, 50],
* radius: 25,
* fillColor: 'black'
* });
*
*
* // Create a circle shaped path with 50% opacity:
* var path2 = new Path.Circle({
* center: [150, 50],
@ -624,19 +624,19 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
* fillColor: 'black',
* opacity: 0.5
* });
*
*
* // Fetch first item whose opacity is smaller than 1
* var item = paper.project.getItem({
* opacity: function(value) {
* return value < 1;
* }
* });
*
*
* // Select the fetched item:
* item.selected = true;
*
* @example {@paperscript} // Fetch item using a comparing function (2):
*
*
* // Create a rectangle shaped path (4 segments):
* var path1 = new Path.Rectangle({
* from: [25, 25],
@ -644,7 +644,7 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
* strokeColor: 'black',
* strokeWidth: 10
* });
*
*
* // Create a line shaped path (2 segments):
* var path2 = new Path.Line({
* from: [125, 50],
@ -652,7 +652,7 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
* strokeColor: 'black',
* strokeWidth: 10
* });
*
*
* // Fetch first path with 2 segments:
* var item = project.getItem({
* class: Path,
@ -660,12 +660,12 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
* return segments.length == 2;
* }
* });
*
*
* // Select the fetched path:
* item.selected = true;
*
*
* @example {@paperscript} // Match (nested) properties of the data property:
*
*
* // Create a black circle shaped path:
* var path1 = new Path.Circle({
* center: [50, 50],
@ -679,7 +679,7 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
* }
* }
* });
*
*
* // Create a red circle shaped path:
* var path2 = new Path.Circle({
* center: [150, 50],
@ -693,7 +693,7 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
* }
* }
* });
*
*
* // Fetch item whose data object contains a person
* // object whose name is john and length is 180:
* var item = paper.project.getItem({
@ -704,12 +704,12 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
* }
* }
* });
*
*
* // Select the fetched item:
* item.selected = true;
*
*
* @example {@paperscript} // Match strings using regular expressions:
*
*
* // Create a path named 'aardvark':
* var path1 = new Path.Circle({
* center: [50, 50],
@ -717,7 +717,7 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
* fillColor: 'black',
* name: 'aardvark'
* });
*
*
* // Create a path named 'apple':
* var path2 = new Path.Circle({
* center: [150, 50],
@ -725,15 +725,15 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
* fillColor: 'black',
* name: 'apple'
* });
*
*
* // Fetch the first item that has a name starting with 'a':
* var item = project.getItem({
* name: /^a/
* });
*
*
* // Change the fill color of the matched item:
* item.fillColor = 'red';
*
*
* @param {Object} match The criteria to match against.
* @return {Item}
*/