From 59da291d54991f673bf212709bd54df26a50cd52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrg=20Lehni?= Date: Wed, 2 Apr 2014 21:03:35 +0200 Subject: [PATCH] Remove tabs in examples in favor of 4 spaces. To remove all these annoying JSHint complaints. --- src/basic/Point.js | 16 +- src/basic/Rectangle.js | 86 ++--- src/basic/Size.js | 4 +- src/item/Group.js | 48 +-- src/item/Item.js | 576 +++++++++++++++++----------------- src/item/Layer.js | 6 +- src/item/PlacedSymbol.js | 12 +- src/item/Raster.js | 10 +- src/item/Shape.js | 46 +-- src/path/CompoundPath.js | 32 +- src/path/Path.Constructors.js | 78 ++--- src/path/Path.js | 264 ++++++++-------- src/path/PathItem.js | 102 +++--- src/path/Segment.js | 16 +- src/project/Project.js | 6 +- src/style/Color.js | 12 +- src/style/Gradient.js | 38 +-- src/style/GradientStop.js | 52 +-- src/style/Style.js | 32 +- src/text/PointText.js | 12 +- src/text/TextItem.js | 6 +- src/tool/Tool.js | 86 ++--- src/tool/ToolEvent.js | 8 +- src/ui/Key.js | 12 +- src/ui/View.js | 26 +- 25 files changed, 793 insertions(+), 793 deletions(-) diff --git a/src/basic/Point.js b/src/basic/Point.js index 23743da2..6730fb71 100644 --- a/src/basic/Point.js +++ b/src/basic/Point.js @@ -79,8 +79,8 @@ var Point = Base.extend(/** @lends Point# */{ * // properties: * * var point = new Point({ - * length: 10, - * angle: 90 + * length: 10, + * angle: 90 * }); * console.log(point.length); // 10 * console.log(point.angle); // 90 @@ -89,8 +89,8 @@ var Point = Base.extend(/** @lends Point# */{ * // Creating a point at x: 10, y: 20 using an object literal: * * var point = new Point({ - * x: 10, - * y: 20 + * x: 10, + * y: 20 * }); * console.log(point.x); // 10 * console.log(point.y); // 20 @@ -99,8 +99,8 @@ var Point = Base.extend(/** @lends Point# */{ * // Passing an object to a functionality that expects a point: * * var center = { - * x: 50, - * y: 50 + * x: 50, + * y: 50 * }; * * // Creates a circle shaped path at x: 50, y: 50 @@ -366,8 +366,8 @@ var Point = Base.extend(/** @lends Point# */{ * * @example * var point = new Point({ - * angle: 10, - * length: 20 + * angle: 10, + * length: 20 * }); * console.log(point.quadrant); // 1 * diff --git a/src/basic/Rectangle.js b/src/basic/Rectangle.js index e285ceb9..2f916482 100644 --- a/src/basic/Rectangle.js +++ b/src/basic/Rectangle.js @@ -41,14 +41,14 @@ var Rectangle = Base.extend(/** @lends Rectangle# */{ * * @example // Create a rectangle between {x: 20, y: 20} and {x: 80, y:80} * var rectangle = new Rectangle({ - * point: [20, 20], - * size: [60, 60] + * point: [20, 20], + * size: [60, 60] * }); * * @example // Create a rectangle between {x: 20, y: 20} and {x: 80, y:80} * var rectangle = new Rectangle({ - * from: [20, 20], - * to: [80, 80] + * from: [20, 20], + * to: [80, 80] * }); */ /** @@ -511,15 +511,15 @@ var Rectangle = Base.extend(/** @lends Rectangle# */{ * circle.fillColor = 'red'; * * function onMouseMove(event) { - * // Check whether the mouse position intersects with the - * // bounding box of the item: - * if (circle.bounds.contains(event.point)) { - * // If it intersects, fill it with green: - * circle.fillColor = 'green'; - * } else { - * // If it doesn't intersect, fill it with red: - * circle.fillColor = 'red'; - * } + * // Check whether the mouse position intersects with the + * // bounding box of the item: + * if (circle.bounds.contains(event.point)) { + * // If it intersects, fill it with green: + * circle.fillColor = 'green'; + * } else { + * // If it doesn't intersect, fill it with red: + * circle.fillColor = 'red'; + * } * } */ /** @@ -538,8 +538,8 @@ var Rectangle = Base.extend(/** @lends Rectangle# */{ * * // All newly created paths will inherit these styles: * project.currentStyle = { - * fillColor: 'green', - * strokeColor: 'black' + * fillColor: 'green', + * strokeColor: 'black' * }; * * // Create a circle shaped path at {x: 80, y: 50} @@ -551,20 +551,20 @@ var Rectangle = Base.extend(/** @lends Rectangle# */{ * var circle = new Path.Circle(new Point(80, 50), 30); * * function onMouseMove(event) { - * // Move the circle to the position of the mouse: - * circle.position = event.point; + * // Move the circle to the position of the mouse: + * circle.position = event.point; * - * // Check whether the bounding box of the smaller circle - * // is contained within the bounding box of the larger item: - * if (largeCircle.bounds.contains(circle.bounds)) { - * // If it does, fill it with green: - * circle.fillColor = 'green'; - * largeCircle.fillColor = 'green'; - * } else { - * // If doesn't, fill it with red: - * circle.fillColor = 'red'; - * largeCircle.fillColor = 'red'; - * } + * // Check whether the bounding box of the smaller circle + * // is contained within the bounding box of the larger item: + * if (largeCircle.bounds.contains(circle.bounds)) { + * // If it does, fill it with green: + * circle.fillColor = 'green'; + * largeCircle.fillColor = 'green'; + * } else { + * // If doesn't, fill it with red: + * circle.fillColor = 'red'; + * largeCircle.fillColor = 'red'; + * } * } */ contains: function(arg) { @@ -608,8 +608,8 @@ var Rectangle = Base.extend(/** @lends Rectangle# */{ * * // All newly created paths will inherit these styles: * project.currentStyle = { - * fillColor: 'green', - * strokeColor: 'black' + * fillColor: 'green', + * strokeColor: 'black' * }; * * // Create a circle shaped path at {x: 80, y: 50} @@ -621,20 +621,20 @@ var Rectangle = Base.extend(/** @lends Rectangle# */{ * var circle = new Path.Circle(new Point(80, 50), 30); * * function onMouseMove(event) { - * // Move the circle to the position of the mouse: - * circle.position = event.point; + * // Move the circle to the position of the mouse: + * circle.position = event.point; * - * // Check whether the bounding box of the two circle - * // shaped paths intersect: - * if (largeCircle.bounds.intersects(circle.bounds)) { - * // If it does, fill it with green: - * circle.fillColor = 'green'; - * largeCircle.fillColor = 'green'; - * } else { - * // If doesn't, fill it with red: - * circle.fillColor = 'red'; - * largeCircle.fillColor = 'red'; - * } + * // Check whether the bounding box of the two circle + * // shaped paths intersect: + * if (largeCircle.bounds.intersects(circle.bounds)) { + * // If it does, fill it with green: + * circle.fillColor = 'green'; + * largeCircle.fillColor = 'green'; + * } else { + * // If doesn't, fill it with red: + * circle.fillColor = 'red'; + * largeCircle.fillColor = 'red'; + * } * } */ intersects: function(/* rect */) { diff --git a/src/basic/Size.js b/src/basic/Size.js index 22c4146a..507c063e 100644 --- a/src/basic/Size.js +++ b/src/basic/Size.js @@ -67,8 +67,8 @@ var Size = Base.extend(/** @lends Size# */{ * // Creating a size of width: 10, height: 20 using an object literal: * * var size = new Size({ - * width: 10, - * height: 20 + * width: 10, + * height: 20 * }); * console.log(size.width); // 10 * console.log(size.height); // 20 diff --git a/src/item/Group.js b/src/item/Group.js index 841d760c..aa7a9664 100644 --- a/src/item/Group.js +++ b/src/item/Group.js @@ -54,19 +54,19 @@ var Group = Item.extend(/** @lends Group# */{ * var group = new Group(); * * function onMouseDown(event) { - * // Create a new circle shaped path at the position - * // of the mouse: - * var path = new Path.Circle(event.point, 5); - * path.fillColor = 'black'; + * // Create a new circle shaped path at the position + * // of the mouse: + * var path = new Path.Circle(event.point, 5); + * path.fillColor = 'black'; * - * // Add the path to the group's children list: - * group.addChild(path); + * // Add the path to the group's children list: + * group.addChild(path); * } * * function onFrame(event) { - * // Rotate the group by 1 degree from - * // the centerpoint of the view: - * group.rotate(1, view.center); + * // Rotate the group by 1 degree from + * // the centerpoint of the view: + * group.rotate(1, view.center); * } */ /** @@ -82,11 +82,11 @@ var Group = Item.extend(/** @lends Group# */{ * * // Create a group from the two paths: * var group = new Group({ - * children: [path, path2], - * // Set the stroke color of all items in the group: - * strokeColor: 'black', - * // Move the group to the center of the view: - * position: view.center + * children: [path, path2], + * // Set the stroke color of all items in the group: + * strokeColor: 'black', + * // Move the group to the center of the view: + * position: view.center * }); */ initialize: function Group(arg) { @@ -134,17 +134,17 @@ var Group = Item.extend(/** @lends Group# */{ * * @example {@paperscript} * var star = new Path.Star({ - * center: view.center, - * points: 6, - * radius1: 20, - * radius2: 40, - * fillColor: 'red' + * center: view.center, + * points: 6, + * radius1: 20, + * radius2: 40, + * fillColor: 'red' * }); * * var circle = new Path.Circle({ - * center: view.center, - * radius: 25, - * strokeColor: 'black' + * center: view.center, + * radius: 25, + * strokeColor: 'black' * }); * * // Create a group of the two items and clip it: @@ -153,8 +153,8 @@ var Group = Item.extend(/** @lends Group# */{ * * // Lets animate the circle: * function onFrame(event) { - * var offset = Math.sin(event.count / 30) * 30; - * circle.position.x = view.center.x + offset; + * var offset = Math.sin(event.count / 30) * 30; + * circle.position.x = view.center.x + offset; * } */ isClipped: function() { diff --git a/src/item/Item.js b/src/item/Item.js index 9def02e9..596e77df 100644 --- a/src/item/Item.js +++ b/src/item/Item.js @@ -284,15 +284,15 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * @example {@paperscript} * // Setting properties through an object literal * var circle = new Path.Circle({ - * center: [80, 50], - * radius: 35 + * center: [80, 50], + * radius: 35 * }); * * circle.set({ - * strokeColor: 'red', - * strokeWidth: 10, - * fillColor: 'black', - * selected: true + * strokeColor: 'red', + * strokeWidth: 10, + * fillColor: 'black', + * selected: true * }); */ set: function(props) { @@ -331,8 +331,8 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * * @example {@paperscript} * var path = new Path.Circle({ - * center: [80, 50], - * radius: 35 + * center: [80, 50], + * radius: 35 * }); * // Set the name of the path: @@ -389,26 +389,26 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * // Applying several styles to an item in one go, by passing an object * // to its style property: * var circle = new Path.Circle({ - * center: [80, 50], - * radius: 30 + * center: [80, 50], + * radius: 30 * }); * circle.style = { - * fillColor: 'blue', - * strokeColor: 'red', - * strokeWidth: 5 + * fillColor: 'blue', + * strokeColor: 'red', + * strokeWidth: 5 * }; * * @example {@paperscript split=true height=100} * // Copying the style of another item: * var path = new Path.Circle({ - * center: [50, 50], - * radius: 30, - * fillColor: 'red' + * center: [50, 50], + * radius: 30, + * fillColor: 'red' * }); * * var path2 = new Path.Circle({ - * center: new Point(180, 50), - * radius: 20 + * center: new Point(180, 50), + * radius: 20 * }); * * // Copy the path style of path: @@ -417,20 +417,20 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * @example {@paperscript} * // Applying the same style object to multiple items: * var myStyle = { - * fillColor: 'red', - * strokeColor: 'blue', - * strokeWidth: 4 + * fillColor: 'red', + * strokeColor: 'blue', + * strokeWidth: 4 * }; * * var path = new Path.Circle({ - * center: [50, 50], - * radius: 30 + * center: [50, 50], + * radius: 30 * }); * path.style = myStyle; * * var path2 = new Path.Circle({ - * center: new Point(150, 50), - * radius: 20 + * center: new Point(150, 50), + * radius: 20 * }); * path2.style = myStyle; */ @@ -504,9 +504,9 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * @example {@paperscript} * // Hiding an item: * var path = new Path.Circle({ - * center: [50, 50], - * radius: 20, - * fillColor: 'red' + * center: [50, 50], + * radius: 20, + * fillColor: 'red' * }); * * // Hide the path: @@ -539,15 +539,15 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * background.fillColor = 'white'; * * var circle = new Path.Circle({ - * center: [80, 50], - * radius: 35, - * fillColor: 'red' + * center: [80, 50], + * radius: 35, + * fillColor: 'red' * }); * * var circle2 = new Path.Circle({ - * center: new Point(120, 50), - * radius: 35, - * fillColor: 'blue' + * center: new Point(120, 50), + * radius: 35, + * fillColor: 'blue' * }); * * // Set the blend mode of circle2: @@ -565,17 +565,17 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * @example {@paperscript} * // Making an item 50% transparent: * var circle = new Path.Circle({ - * center: [80, 50], - * radius: 35, - * fillColor: 'red' + * center: [80, 50], + * radius: 35, + * fillColor: 'red' * }); * * var circle2 = new Path.Circle({ - * center: new Point(120, 50), - * radius: 35, - * fillColor: 'blue', - * strokeColor: 'green', - * strokeWidth: 10 + * center: new Point(120, 50), + * radius: 35, + * fillColor: 'blue', + * strokeColor: 'green', + * strokeWidth: 10 * }); * * // Make circle2 50% transparent: @@ -616,8 +616,8 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * @example {@paperscript} * // Selecting an item: * var path = new Path.Circle({ - * center: [80, 50], - * radius: 35 + * center: [80, 50], + * radius: 35 * }); * path.selected = true; // Select the path */ @@ -719,19 +719,19 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * @example * var path = new Path(); * path.data = { - * home: 'Omicron Theta', - * found: 2338, - * pets: ['Spot'] + * home: 'Omicron Theta', + * found: 2338, + * pets: ['Spot'] * }; * console.log(path.data.pets.length); // 1 * * @example * var path = new Path({ - * data: { - * home: 'Omicron Theta', - * found: 2338, - * pets: ['Spot'] - * } + * data: { + * home: 'Omicron Theta', + * found: 2338, + * pets: ['Spot'] + * } * }); * console.log(path.data.pets.length); // 1 */ @@ -760,9 +760,9 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * * // Create a circle at position { x: 10, y: 10 } * var circle = new Path.Circle({ - * center: new Point(10, 10), - * radius: 10, - * fillColor: 'red' + * center: new Point(10, 10), + * radius: 10, + * fillColor: 'red' * }); * * // Move the circle to { x: 20, y: 20 } @@ -776,9 +776,9 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * * // Create a circle at position { x: 20, y: 20 } * var circle = new Path.Circle({ - * center: new Point(20, 20), - * radius: 10, - * fillColor: 'red' + * center: new Point(20, 20), + * radius: 10, + * fillColor: 'red' * }); * * // Move the circle 100 points to the right @@ -1301,7 +1301,7 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * var group = new Group(); * * var path = new Path({ - * parent: group + * parent: group * }); * * // The parent of the path is the group: @@ -1334,8 +1334,8 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * @example {@paperscript} * // Accessing items in the children array: * var path = new Path.Circle({ - * center: [80, 50], - * radius: 35 + * center: [80, 50], + * radius: 35 * }); * * // Create a group and move the path into it: @@ -1348,8 +1348,8 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * @example {@paperscript} * // Accessing children by name: * var path = new Path.Circle({ - * center: [80, 50], - * radius: 35 + * center: [80, 50], + * radius: 35 * }); * // Set the name of the path: * path.name = 'example'; @@ -1364,8 +1364,8 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * @example {@paperscript} * // Passing an array of items to item.children: * var path = new Path.Circle({ - * center: [80, 50], - * radius: 35 + * center: [80, 50], + * radius: 35 * }); * * var group = new Group(); @@ -1482,17 +1482,17 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * @example {@paperscript} * // Cloning items: * var circle = new Path.Circle({ - * center: [50, 50], - * radius: 10, - * fillColor: 'red' + * center: [50, 50], + * radius: 10, + * fillColor: 'red' * }); * * // Make 20 copies of the circle: * for (var i = 0; i < 20; i++) { - * var copy = circle.clone(); + * var copy = circle.clone(); * - * // Distribute the copies horizontally, so we can see them: - * copy.position.x += i * copy.bounds.width; + * // Distribute the copies horizontally, so we can see them: + * copy.position.x += i * copy.bounds.width; * } */ clone: function(insert) { @@ -1562,9 +1562,9 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * @example {@paperscript} * // Rasterizing an item: * var circle = new Path.Circle({ - * center: [50, 50], - * radius: 5, - * fillColor: 'red' + * center: [50, 50], + * radius: 5, + * fillColor: 'red' * }); * * // Create a rasterized version of the path: @@ -1610,23 +1610,23 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * @example {@paperscript} // Click within and outside the star below * // Create a star shaped path: * var path = new Path.Star({ - * center: [50, 50], - * points: 12, - * radius1: 20, - * radius2: 40, - * fillColor: 'black' + * center: [50, 50], + * points: 12, + * radius1: 20, + * radius2: 40, + * fillColor: 'black' * }); * * // Whenever the user presses the mouse: * function onMouseDown(event) { - * // If the position of the mouse is within the path, - * // set its fill color to red, otherwise set it to - * // black: - * if (path.contains(event.point)) { - * path.fillColor = 'red'; - * } else { - * path.fillColor = 'black'; - * } + * // If the position of the mouse is within the path, + * // set its fill color to red, otherwise set it to + * // black: + * if (path.contains(event.point)) { + * path.fillColor = 'red'; + * } else { + * path.fillColor = 'black'; + * } * } * * @param {Point} point The point to check for. @@ -2451,8 +2451,8 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * // Create a circle shaped path at { x: 80, y: 50 } * // with a radius of 35: * var circle = new Path.Circle({ - * center: [80, 50], - * radius: 35 + * center: [80, 50], + * radius: 35 * }); * * // Set its stroke color to RGB red: @@ -2472,9 +2472,9 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * // Create a circle shaped path at { x: 80, y: 50 } * // with a radius of 35: * var circle = new Path.Circle({ - * center: [80, 50], - * radius: 35, - * strokeColor: 'red' + * center: [80, 50], + * radius: 35, + * strokeColor: 'red' * }); * * // Set its stroke width to 10: @@ -2494,10 +2494,10 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * // A look at the different stroke caps: * * var line = new Path({ - * segments: [[80, 50], [420, 50]], - * strokeColor: 'black', - * strokeWidth: 20, - * selected: true + * segments: [[80, 50], [420, 50]], + * strokeColor: 'black', + * strokeWidth: 20, + * selected: true * }); * * // Set the stroke cap of the line to be round: @@ -2526,11 +2526,11 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * @example {@paperscript height=120} * // A look at the different stroke joins: * var path = new Path({ - * segments: [[80, 100], [120, 40], [160, 100]], - * strokeColor: 'black', - * strokeWidth: 20, - * // Select the path, in order to see where the stroke is formed: - * selected: true + * segments: [[80, 100], [120, 40], [160, 100]], + * strokeColor: 'black', + * strokeWidth: 20, + * // Select the path, in order to see where the stroke is formed: + * selected: true * }); * * var path2 = path.clone(); @@ -2556,10 +2556,10 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * * @example {@paperscript} * var path = new Path.Circle({ - * center: [80, 50], - * radius: 40, - * strokeWidth: 2, - * strokeColor: 'black' + * center: [80, 50], + * radius: 40, + * strokeWidth: 2, + * strokeColor: 'black' * }); * * // Set the dashed stroke to [10pt dash, 4pt gap]: @@ -2610,8 +2610,8 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * // Create a circle shaped path at { x: 80, y: 50 } * // with a radius of 35: * var circle = new Path.Circle({ - * center: [80, 50], - * radius: 35 + * center: [80, 50], + * radius: 35 * }); * * // Set the fill color of the circle to RGB red: @@ -2676,15 +2676,15 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * // Draw a circle shaped path in the center of the view, * // to show the rotation point: * var circle = new Path.Circle({ - * center: view.center, - * radius: 5, - * fillColor: 'white' + * center: view.center, + * radius: 5, + * fillColor: 'white' * }); * * // Each frame rotate the path 3 degrees around the center point * // of the view: * function onFrame(event) { - * path.rotate(3, view.center); + * path.rotate(3, view.center); * } */ rotate: function(angle /*, center */) { @@ -2716,9 +2716,9 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * // Create a circle shaped path at { x: 80, y: 50 } * // with a radius of 20: * var circle = new Path.Circle({ - * center: [80, 50], - * radius: 20, - * fillColor: 'red' + * center: [80, 50], + * radius: 20, + * fillColor: 'red' * }); * * // Scale the path by 150% from its center point @@ -2730,9 +2730,9 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * // Create a circle shaped path at { x: 80, y: 50 } * // with a radius of 20: * var circle = new Path.Circle({ - * center: [80, 50], - * radius: 20, - * fillColor: 'red' + * center: [80, 50], + * radius: 20, + * fillColor: 'red' * }); * * // Scale the path 150% from its bottom left corner @@ -2754,9 +2754,9 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * // Create a circle shaped path at { x: 100, y: 50 } * // with a radius of 20: * var circle = new Path.Circle({ - * center: [100, 50], - * radius: 20, - * fillColor: 'red' + * center: [100, 50], + * radius: 20, + * fillColor: 'red' * }); * * // Scale the path horizontally by 300% @@ -2940,17 +2940,17 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * // Create a rectangle shaped path with its top left corner * // at {x: 80, y: 25} and a size of {width: 75, height: 50}: * var path = new Path.Rectangle({ - * point: [80, 25], - * size: [75, 50], - * fillColor: 'black' + * point: [80, 25], + * size: [75, 50], + * fillColor: 'black' * }); * * // Create a circle shaped path with its center at {x: 80, y: 50} * // and a radius of 30. * var circlePath = new Path.Circle({ - * center: [80, 50], - * radius: 30, - * fillColor: 'red' + * center: [80, 50], + * radius: 30, + * fillColor: 'red' * }); * * // Fit the circlePath to the bounding rectangle of @@ -2964,17 +2964,17 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * // Create a rectangle shaped path with its top left corner * // at {x: 80, y: 25} and a size of {width: 75, height: 50}: * var path = new Path.Rectangle({ - * point: [80, 25], - * size: [75, 50], - * fillColor: 'black' + * point: [80, 25], + * size: [75, 50], + * fillColor: 'black' * }); * * // Create a circle shaped path with its center at {x: 80, y: 50} * // and a radius of 30. * var circlePath = new Path.Circle({ - * center: [80, 50], - * radius: 30, - * fillColor: 'red' + * center: [80, 50], + * radius: 30, + * fillColor: 'red' * }); * * // Fit the circlePath to the bounding rectangle of @@ -2984,9 +2984,9 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * @example {@paperscript height=200} * // Fitting an item to the bounding rectangle of the view * var path = new Path.Circle({ - * center: [80, 50], - * radius: 30, - * fillColor: 'red' + * center: [80, 50], + * radius: 30, + * fillColor: 'red' * }); * * // Fit the path to the bounding rectangle of the view: @@ -3031,8 +3031,8 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * path.fillColor = 'black'; * * path.onFrame = function(event) { - * // Every frame, rotate the path by 3 degrees: - * this.rotate(3); + * // Every frame, rotate the path by 3 degrees: + * this.rotate(3); * } * * @name Item#onFrame @@ -3054,15 +3054,15 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * * // Create a circle shaped path at the center of the view: * var path = new Path.Circle({ - * center: view.center, - * radius: 25, - * fillColor: 'black' + * center: view.center, + * radius: 25, + * fillColor: 'black' * }); * * // When the mouse is pressed on the item, * // set its fill color to red: * path.onMouseDown = function(event) { - * this.fillColor = 'red'; + * this.fillColor = 'red'; * } * * @example {@paperscript} @@ -3070,19 +3070,19 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * * // Loop 30 times: * for (var i = 0; i < 30; i++) { - * // Create a circle shaped path at a random position - * // in the view: - * var path = new Path.Circle({ - * center: Point.random() * view.size, - * radius: 25, - * fillColor: 'black', - * strokeColor: 'white' - * }); + * // Create a circle shaped path at a random position + * // in the view: + * var path = new Path.Circle({ + * center: Point.random() * view.size, + * radius: 25, + * fillColor: 'black', + * strokeColor: 'white' + * }); * - * // When the mouse is pressed on the item, remove it: - * path.onMouseDown = function(event) { - * this.remove(); - * } + * // When the mouse is pressed on the item, remove it: + * path.onMouseDown = function(event) { + * this.remove(); + * } * } */ @@ -3100,15 +3100,15 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * * // Create a circle shaped path at the center of the view: * var path = new Path.Circle({ - * center: view.center, - * radius: 25, - * fillColor: 'black' + * center: view.center, + * radius: 25, + * fillColor: 'black' * }); * * // When the mouse is released over the item, * // set its fill color to red: * path.onMouseUp = function(event) { - * this.fillColor = 'red'; + * this.fillColor = 'red'; * } */ @@ -3126,15 +3126,15 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * * // Create a circle shaped path at the center of the view: * var path = new Path.Circle({ - * center: view.center, - * radius: 25, - * fillColor: 'black' + * center: view.center, + * radius: 25, + * fillColor: 'black' * }); * * // When the mouse is clicked on the item, * // set its fill color to red: * path.onClick = function(event) { - * this.fillColor = 'red'; + * this.fillColor = 'red'; * } * * @example {@paperscript} @@ -3142,19 +3142,19 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * * // Loop 30 times: * for (var i = 0; i < 30; i++) { - * // Create a circle shaped path at a random position - * // in the view: - * var path = new Path.Circle({ - * center: Point.random() * view.size, - * radius: 25, - * fillColor: 'black', - * strokeColor: 'white' - * }); + * // Create a circle shaped path at a random position + * // in the view: + * var path = new Path.Circle({ + * center: Point.random() * view.size, + * radius: 25, + * fillColor: 'black', + * strokeColor: 'white' + * }); * - * // When the mouse clicks on the item, remove it: - * path.onClick = function(event) { - * this.remove(); - * } + * // When the mouse clicks on the item, remove it: + * path.onClick = function(event) { + * this.remove(); + * } * } */ @@ -3172,15 +3172,15 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * * // Create a circle shaped path at the center of the view: * var path = new Path.Circle({ - * center: view.center, - * radius: 25, - * fillColor: 'black' + * center: view.center, + * radius: 25, + * fillColor: 'black' * }); * * // When the mouse is double clicked on the item, * // set its fill color to red: * path.onDoubleClick = function(event) { - * this.fillColor = 'red'; + * this.fillColor = 'red'; * } * * @example {@paperscript} @@ -3188,19 +3188,19 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * * // Loop 30 times: * for (var i = 0; i < 30; i++) { - * // Create a circle shaped path at a random position - * // in the view: - * var path = new Path.Circle({ - * center: Point.random() * view.size, - * radius: 25, - * fillColor: 'black', - * strokeColor: 'white' - * }); + * // Create a circle shaped path at a random position + * // in the view: + * var path = new Path.Circle({ + * center: Point.random() * view.size, + * radius: 25, + * fillColor: 'black', + * strokeColor: 'white' + * }); * - * // When the mouse is double clicked on the item, remove it: - * path.onDoubleClick = function(event) { - * this.remove(); - * } + * // When the mouse is double clicked on the item, remove it: + * path.onDoubleClick = function(event) { + * this.remove(); + * } * } */ @@ -3217,16 +3217,16 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * // Move over the circle shaped path, to change its opacity: * * // Create a circle shaped path at the center of the view: - * var path = new Path.Circle({ - * center: view.center, - * radius: 25, - * fillColor: 'black' - * }); + * var path = new Path.Circle({ + * center: view.center, + * radius: 25, + * fillColor: 'black' + * }); * * // When the mouse moves on top of the item, set its opacity * // to a random value between 0 and 1: * path.onMouseMove = function(event) { - * this.opacity = Math.random(); + * this.opacity = Math.random(); * } */ @@ -3247,19 +3247,19 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * * // Create a circle shaped path at the center of the view: * var path = new Path.Circle({ - * center: view.center, - * radius: 25, - * fillColor: 'black' + * center: view.center, + * radius: 25, + * fillColor: 'black' * }); * * // When the mouse enters the item, set its fill color to red: * path.onMouseEnter = function(event) { - * this.fillColor = 'red'; + * this.fillColor = 'red'; * } * * // When the mouse leaves the item, set its fill color to black: * path.onMouseLeave = function(event) { - * this.fillColor = 'black'; + * this.fillColor = 'black'; * } * @example {@paperscript} * // When you click the mouse, you create new circle shaped items. When you @@ -3268,24 +3268,24 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * // to black. * * function enter(event) { - * this.fillColor = 'red'; + * this.fillColor = 'red'; * } * * function leave(event) { - * this.fillColor = 'black'; + * this.fillColor = 'black'; * } * * // When the mouse is pressed: * function onMouseDown(event) { - * // Create a circle shaped path at the position of the mouse: - * var path = new Path.Circle(event.point, 25); - * path.fillColor = 'black'; + * // Create a circle shaped path at the position of the mouse: + * var path = new Path.Circle(event.point, 25); + * path.fillColor = 'black'; * - * // When the mouse enters the item, set its fill color to red: - * path.onMouseEnter = enter; + * // When the mouse enters the item, set its fill color to red: + * path.onMouseEnter = enter; * - * // When the mouse leaves the item, set its fill color to black: - * path.onMouseLeave = leave; + * // When the mouse leaves the item, set its fill color to black: + * path.onMouseLeave = leave; * } */ @@ -3304,14 +3304,14 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * * // Create a circle shaped path at the center of the view: * var path = new Path.Circle({ - * center: view.center, - * radius: 25, - * fillColor: 'black' + * center: view.center, + * radius: 25, + * fillColor: 'black' * }); * * // When the mouse leaves the item, set its fill color to red: * path.onMouseLeave = function(event) { - * this.fillColor = 'red'; + * this.fillColor = 'red'; * } */ @@ -3335,19 +3335,19 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * * // Create a circle shaped path at the center of the view: * var path = new Path.Circle({ - * center: view.center, - * radius: 25, - * fillColor: 'black' + * center: view.center, + * radius: 25, + * fillColor: 'black' * }); * * // When the mouse enters the item, set its fill color to red: * path.on('mouseenter', function() { - * this.fillColor = 'red'; + * this.fillColor = 'red'; * }); * * // When the mouse leaves the item, set its fill color to black: * path.on('mouseleave', function() { - * this.fillColor = 'black'; + * this.fillColor = 'black'; * }); */ /** @@ -3366,19 +3366,19 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * * // Create a circle shaped path at the center of the view: * var path = new Path.Circle({ - * center: view.center, - * radius: 25 + * center: view.center, + * radius: 25 * }); * path.fillColor = 'black'; * * // When the mouse enters the item, set its fill color to red: * path.on({ - * mouseenter: function(event) { - * this.fillColor = 'red'; - * }, - * mouseleave: function(event) { - * this.fillColor = 'black'; - * } + * mouseenter: function(event) { + * this.fillColor = 'red'; + * }, + * mouseleave: function(event) { + * this.fillColor = 'black'; + * } * }); * @example {@paperscript} * // When you click the mouse, you create new circle shaped items. When you @@ -3386,25 +3386,25 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * // move the mouse outside again, its fill color is set black. * * var pathHandlers = { - * mouseenter: function(event) { - * this.fillColor = 'red'; - * }, - * mouseleave: function(event) { - * this.fillColor = 'black'; - * } + * mouseenter: function(event) { + * this.fillColor = 'red'; + * }, + * mouseleave: function(event) { + * this.fillColor = 'black'; + * } * } * * // When the mouse is pressed: * function onMouseDown(event) { - * // Create a circle shaped path at the position of the mouse: - * var path = new Path.Circle({ - * center: event.point, - * radius: 25, - * fillColor: 'black' - * }); + * // Create a circle shaped path at the position of the mouse: + * var path = new Path.Circle({ + * center: event.point, + * radius: 25, + * fillColor: 'black' + * }); * - * // Attach the handers inside the object literal to the path: - * path.on(pathHandlers); + * // Attach the handers inside the object literal to the path: + * path.on(pathHandlers); * } */ @@ -3650,19 +3650,19 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * @example {@paperscript height=200} * // Click and drag below: * function onMouseDrag(event) { - * // Create a circle shaped path at the mouse position, - * // with a radius of 10: - * var path = new Path.Circle({ - * center: event.point, - * radius: 10, - * fillColor: 'black' - * }); + * // Create a circle shaped path at the mouse position, + * // with a radius of 10: + * var path = new Path.Circle({ + * center: event.point, + * radius: 10, + * fillColor: 'black' + * }); * - * // Remove the path on the next onMouseDrag or onMouseDown event: - * path.removeOn({ - * drag: true, - * down: true - * }); + * // Remove the path on the next onMouseDrag or onMouseDown event: + * path.removeOn({ + * drag: true, + * down: true + * }); * } */ @@ -3675,16 +3675,16 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * @example {@paperscript height=200} * // Move your mouse below: * function onMouseMove(event) { - * // Create a circle shaped path at the mouse position, - * // with a radius of 10: - * var path = new Path.Circle({ - * center: event.point, - * radius: 10, - * fillColor: 'black' - * }); + * // Create a circle shaped path at the mouse position, + * // with a radius of 10: + * var path = new Path.Circle({ + * center: event.point, + * radius: 10, + * fillColor: 'black' + * }); * - * // On the next move event, automatically remove the path: - * path.removeOnMove(); + * // On the next move event, automatically remove the path: + * path.removeOnMove(); * } */ @@ -3697,16 +3697,16 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * @example {@paperscript height=200} * // Click a few times below: * function onMouseDown(event) { - * // Create a circle shaped path at the mouse position, - * // with a radius of 10: - * var path = new Path.Circle({ - * center: event.point, - * radius: 10, - * fillColor: 'black' - * }); + * // Create a circle shaped path at the mouse position, + * // with a radius of 10: + * var path = new Path.Circle({ + * center: event.point, + * radius: 10, + * fillColor: 'black' + * }); * - * // Remove the path, next time the mouse is pressed: - * path.removeOnDown(); + * // Remove the path, next time the mouse is pressed: + * path.removeOnDown(); * } */ @@ -3719,16 +3719,16 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * @example {@paperscript height=200} * // Click and drag below: * function onMouseDrag(event) { - * // Create a circle shaped path at the mouse position, - * // with a radius of 10: - * var path = new Path.Circle({ - * center: event.point, - * radius: 10, - * fillColor: 'black' - * }); + * // Create a circle shaped path at the mouse position, + * // with a radius of 10: + * var path = new Path.Circle({ + * center: event.point, + * radius: 10, + * fillColor: 'black' + * }); * - * // On the next drag event, automatically remove the path: - * path.removeOnDrag(); + * // On the next drag event, automatically remove the path: + * path.removeOnDrag(); * } */ @@ -3741,16 +3741,16 @@ var Item = Base.extend(Callback, /** @lends Item# */{ * @example {@paperscript height=200} * // Click a few times below: * function onMouseDown(event) { - * // Create a circle shaped path at the mouse position, - * // with a radius of 10: - * var path = new Path.Circle({ - * center: event.point, - * radius: 10, - * fillColor: 'black' - * }); + * // Create a circle shaped path at the mouse position, + * // with a radius of 10: + * var path = new Path.Circle({ + * center: event.point, + * radius: 10, + * fillColor: 'black' + * }); * - * // Remove the path, when the mouse is released: - * path.removeOnUp(); + * // Remove the path, when the mouse is released: + * path.removeOnUp(); * } */ // TODO: implement Item#removeOnFrame diff --git a/src/item/Layer.js b/src/item/Layer.js index fd4855fb..afb6a5fb 100644 --- a/src/item/Layer.js +++ b/src/item/Layer.js @@ -57,9 +57,9 @@ var Layer = Group.extend(/** @lends Layer# */{ * // 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 + * children: [path, path2], + * strokeColor: 'black', + * position: view.center * }); */ initialize: function Layer(arg) { diff --git a/src/item/PlacedSymbol.js b/src/item/PlacedSymbol.js index b4e84050..52522fbd 100644 --- a/src/item/PlacedSymbol.js +++ b/src/item/PlacedSymbol.js @@ -39,12 +39,12 @@ var PlacedSymbol = Item.extend(/** @lends PlacedSymbol# */{ * // Placing 100 instances of a symbol: * // Create a star shaped path at {x: 0, y: 0}: * var path = new Path.Star({ - * center: new Point(0, 0), - * points: 6, - * radius1: 5, - * radius2: 13, - * fillColor: 'white', - * strokeColor: 'black' + * center: new Point(0, 0), + * points: 6, + * radius1: 5, + * radius2: 13, + * fillColor: 'white', + * strokeColor: 'black' * }); * * // Create a symbol from the path: diff --git a/src/item/Raster.js b/src/item/Raster.js index 62161fe6..c77eddb3 100644 --- a/src/item/Raster.js +++ b/src/item/Raster.js @@ -48,7 +48,7 @@ var Raster = Item.extend(/** @lends Raster# */{ * // If you create a Raster using a url, you can use the onLoad * // handler to do something once it is loaded: * raster.onLoad = function() { - * console.log('The image has loaded.'); + * console.log('The image has loaded.'); * }; * * @example // Creating a raster using the id of a DOM Image: @@ -66,8 +66,8 @@ var Raster = Item.extend(/** @lends Raster# */{ * * @example {@paperscript height=300} * var raster = new Raster({ - * source: 'http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png', - * position: view.center + * source: 'http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png', + * position: view.center * }); * * raster.scale(0.5); @@ -285,8 +285,8 @@ var Raster = Item.extend(/** @lends Raster# */{ * * @example {@paperscript} * var raster = new Raster({ - * source: 'http://paperjs.org/about/resources/paper-js.gif', - * position: view.center + * source: 'http://paperjs.org/about/resources/paper-js.gif', + * position: view.center * }); */ getSource: function() { diff --git a/src/item/Shape.js b/src/item/Shape.js index cdb83748..ffcf8ce9 100644 --- a/src/item/Shape.js +++ b/src/item/Shape.js @@ -364,9 +364,9 @@ statics: new function() { * * @example {@paperscript} * var shape = new Shape.Circle({ - * center: [80, 50], - * radius: 30, - * strokeColor: 'black' + * center: [80, 50], + * radius: 30, + * strokeColor: 'black' * }); */ Circle: function(/* center, radius */) { @@ -437,33 +437,33 @@ statics: new function() { * * @example {@paperscript} * var shape = new Shape.Rectangle({ - * point: [20, 20], - * size: [60, 60], - * strokeColor: 'black' + * point: [20, 20], + * size: [60, 60], + * strokeColor: 'black' * }); * * @example {@paperscript} * var shape = new Shape.Rectangle({ - * from: [20, 20], - * to: [80, 80], - * strokeColor: 'black' + * from: [20, 20], + * to: [80, 80], + * strokeColor: 'black' * }); * * @example {@paperscript} * var shape = new Shape.Rectangle({ - * rectangle: { - * topLeft: [20, 20], - * bottomRight: [80, 80] - * }, - * strokeColor: 'black' + * rectangle: { + * topLeft: [20, 20], + * bottomRight: [80, 80] + * }, + * strokeColor: 'black' * }); * * @example {@paperscript} * var shape = new Shape.Rectangle({ * topLeft: [20, 20], - * bottomRight: [80, 80], - * radius: 10, - * strokeColor: 'black' + * bottomRight: [80, 80], + * radius: 10, + * strokeColor: 'black' * }); */ Rectangle: function(/* rectangle */) { @@ -497,16 +497,16 @@ statics: new function() { * * @example {@paperscript} * var shape = new Shape.Ellipse({ - * point: [20, 20], - * size: [180, 60], - * fillColor: 'black' + * point: [20, 20], + * size: [180, 60], + * fillColor: 'black' * }); * * @example {@paperscript} // Placing by center and radius * var shape = new Shape.Ellipse({ - * center: [110, 50], - * radius: [90, 30], - * fillColor: 'black' + * center: [110, 50], + * radius: [90, 30], + * fillColor: 'black' * }); */ Ellipse: function(/* rectangle */) { diff --git a/src/path/CompoundPath.js b/src/path/CompoundPath.js index f6d51661..9c36e038 100644 --- a/src/path/CompoundPath.js +++ b/src/path/CompoundPath.js @@ -34,13 +34,13 @@ var CompoundPath = PathItem.extend(/** @lends CompoundPath# */{ * @example {@paperscript} * // Create a circle shaped path with a hole in it: * var circle = new Path.Circle({ - * center: new Point(50, 50), - * radius: 30 + * center: new Point(50, 50), + * radius: 30 * }); * * var innerCircle = new Path.Circle({ - * center: new Point(50, 50), - * radius: 10 + * center: new Point(50, 50), + * radius: 10 * }); * * var compoundPath = new CompoundPath([circle, innerCircle]); @@ -60,18 +60,18 @@ var CompoundPath = PathItem.extend(/** @lends CompoundPath# */{ * * @example {@paperscript} * var path = new CompoundPath({ - * children: [ - * new Path.Circle({ - * center: new Point(50, 50), - * radius: 30 - * }), - * new Path.Circle({ - * center: new Point(50, 50), - * radius: 10 - * }) - * ], - * fillColor: 'black', - * selected: true + * children: [ + * new Path.Circle({ + * center: new Point(50, 50), + * radius: 30 + * }), + * new Path.Circle({ + * center: new Point(50, 50), + * radius: 10 + * }) + * ], + * fillColor: 'black', + * selected: true * }); */ /** diff --git a/src/path/Path.Constructors.js b/src/path/Path.Constructors.js index dec8ef23..33625646 100644 --- a/src/path/Path.Constructors.js +++ b/src/path/Path.Constructors.js @@ -73,9 +73,9 @@ Path.inject({ statics: new function() { * * @example {@paperscript} * var path = new Path.Line({ - * from: [20, 20], - * to: [80, 80], - * strokeColor: 'black' + * from: [20, 20], + * to: [80, 80], + * strokeColor: 'black' * }); */ Line: function(/* from, to */) { @@ -108,9 +108,9 @@ Path.inject({ statics: new function() { * * @example {@paperscript} * var path = new Path.Circle({ - * center: [80, 50], - * radius: 30, - * strokeColor: 'black' + * center: [80, 50], + * radius: 30, + * strokeColor: 'black' * }); */ Circle: function(/* center, radius */) { @@ -180,33 +180,33 @@ Path.inject({ statics: new function() { * * @example {@paperscript} * var path = new Path.Rectangle({ - * point: [20, 20], - * size: [60, 60], - * strokeColor: 'black' + * point: [20, 20], + * size: [60, 60], + * strokeColor: 'black' * }); * * @example {@paperscript} * var path = new Path.Rectangle({ - * from: [20, 20], - * to: [80, 80], - * strokeColor: 'black' + * from: [20, 20], + * to: [80, 80], + * strokeColor: 'black' * }); * * @example {@paperscript} * var path = new Path.Rectangle({ - * rectangle: { - * topLeft: [20, 20], - * bottomRight: [80, 80] - * }, - * strokeColor: 'black' + * rectangle: { + * topLeft: [20, 20], + * bottomRight: [80, 80] + * }, + * strokeColor: 'black' * }); * * @example {@paperscript} * var path = new Path.Rectangle({ * topLeft: [20, 20], - * bottomRight: [80, 80], - * radius: 10, - * strokeColor: 'black' + * bottomRight: [80, 80], + * radius: 10, + * strokeColor: 'black' * }); */ Rectangle: function(/* rectangle */) { @@ -273,16 +273,16 @@ Path.inject({ statics: new function() { * * @example {@paperscript} * var path = new Path.Ellipse({ - * point: [20, 20], - * size: [180, 60], - * fillColor: 'black' + * point: [20, 20], + * size: [180, 60], + * fillColor: 'black' * }); * * @example {@paperscript} // Placing by center and radius * var shape = new Path.Ellipse({ - * center: [110, 50], - * radius: [90, 30], - * fillColor: 'black' + * center: [110, 50], + * radius: [90, 30], + * fillColor: 'black' * }); */ Ellipse: function(/* rectangle */) { @@ -323,10 +323,10 @@ Path.inject({ statics: new function() { * * @example {@paperscript} * var path = new Path.Arc({ - * from: [20, 20], - * through: [60, 20], - * to: [80, 80], - * strokeColor: 'black' + * from: [20, 20], + * through: [60, 20], + * to: [80, 80], + * strokeColor: 'black' * }); */ Arc: function(/* from, through, to */) { @@ -369,10 +369,10 @@ Path.inject({ statics: new function() { * * @example {@paperscript} * var triangle = new Path.RegularPolygon({ - * center: [50, 50], - * sides: 10, - * radius: 40, - * fillColor: 'black' + * center: [50, 50], + * sides: 10, + * radius: 40, + * fillColor: 'black' * }); */ RegularPolygon: function(/* center, sides, radius */) { @@ -423,11 +423,11 @@ Path.inject({ statics: new function() { * * @example {@paperscript} * var path = new Path.Star({ - * center: [50, 50], - * points: 12, - * radius1: 25, - * radius2: 40, - * fillColor: 'black' + * center: [50, 50], + * points: 12, + * radius1: 25, + * radius2: 40, + * fillColor: 'black' * }); */ Star: function(/* center, points, radius1, radius2 */) { diff --git a/src/path/Path.js b/src/path/Path.js index ae6fa418..67a5f180 100644 --- a/src/path/Path.js +++ b/src/path/Path.js @@ -57,18 +57,18 @@ var Path = PathItem.extend(/** @lends Path# */{ * * @example {@paperscript} * var path = new Path({ - * segments: [[20, 20], [80, 80], [140, 20]], - * fillColor: 'black', - * closed: true + * segments: [[20, 20], [80, 80], [140, 20]], + * fillColor: 'black', + * closed: true * }); * * @example {@paperscript} * var path = new Path({ - * segments: [[20, 20], [80, 80], [140, 20]], - * strokeColor: 'red', - * strokeWidth: 20, - * strokeCap: 'round', - * selected: true + * segments: [[20, 20], [80, 80], [140, 20]], + * strokeColor: 'red', + * strokeWidth: 20, + * strokeCap: 'round', + * selected: true * }); */ /** @@ -471,7 +471,7 @@ var Path = PathItem.extend(/** @lends Path# */{ * @example {@paperscript} * // Adding segments to a path using point objects: * var path = new Path({ - * strokeColor: 'black' + * strokeColor: 'black' * }); * * // Add a segment at {x: 30, y: 75} @@ -484,7 +484,7 @@ var Path = PathItem.extend(/** @lends Path# */{ * @example {@paperscript} * // Adding segments to a path using arrays containing number pairs: * var path = new Path({ - * strokeColor: 'black' + * strokeColor: 'black' * }); * * // Add a segment at {x: 30, y: 75} @@ -497,7 +497,7 @@ var Path = PathItem.extend(/** @lends Path# */{ * @example {@paperscript} * // Adding segments to a path using objects: * var path = new Path({ - * strokeColor: 'black' + * strokeColor: 'black' * }); * * // Add a segment at {x: 30, y: 75} @@ -510,7 +510,7 @@ var Path = PathItem.extend(/** @lends Path# */{ * @example {@paperscript} * // Adding a segment with handles to a path: * var path = new Path({ - * strokeColor: 'black' + * strokeColor: 'black' * }); * * path.add(new Point(30, 75)); @@ -598,7 +598,7 @@ var Path = PathItem.extend(/** @lends Path# */{ * @example {@paperscript} * // Adding an array of Point objects: * var path = new Path({ - * strokeColor: 'black' + * strokeColor: 'black' * }); * var points = [new Point(30, 50), new Point(170, 50)]; * path.addSegments(points); @@ -606,7 +606,7 @@ var Path = PathItem.extend(/** @lends Path# */{ * @example {@paperscript} * // Adding an array of [x, y] arrays: * var path = new Path({ - * strokeColor: 'black' + * strokeColor: 'black' * }); * var array = [[30, 75], [100, 20], [170, 75]]; * path.addSegments(array); @@ -615,7 +615,7 @@ var Path = PathItem.extend(/** @lends Path# */{ * // Adding segments from one path to another: * * var path = new Path({ - * strokeColor: 'black' + * strokeColor: 'black' * }); * path.addSegments([[30, 75], [100, 20], [170, 75]]); * @@ -659,9 +659,9 @@ var Path = PathItem.extend(/** @lends Path# */{ * // Create a circle shaped path at { x: 80, y: 50 } * // with a radius of 35: * var path = new Path.Circle({ - * center: new Point(80, 50), - * radius: 35, - * strokeColor: 'black' + * center: new Point(80, 50), + * radius: 35, + * strokeColor: 'black' * }); * * // Remove its second segment: @@ -696,9 +696,9 @@ var Path = PathItem.extend(/** @lends Path# */{ * // Create a circle shaped path at { x: 80, y: 50 } * // with a radius of 35: * var path = new Path.Circle({ - * center: new Point(80, 50), - * radius: 35, - * strokeColor: 'black' + * center: new Point(80, 50), + * radius: 35, + * strokeColor: 'black' * }); * * // Remove the segments from index 1 till index 2: @@ -774,16 +774,16 @@ var Path = PathItem.extend(/** @lends Path# */{ * @example {@paperscript} * // Selecting an item: * var path = new Path.Circle({ - * center: new Size(80, 50), - * radius: 35 + * center: new Size(80, 50), + * radius: 35 * }); * path.selected = true; // Select the path * * @example {@paperscript} * // A path is selected, if one or more of its segments is selected: * var path = new Path.Circle({ - * center: new Size(80, 50), - * radius: 35 + * center: new Size(80, 50), + * radius: 35 * }); * * // Select the second segment of the path: @@ -791,7 +791,7 @@ var Path = PathItem.extend(/** @lends Path# */{ * * // If the path is selected (which it is), set its fill color to red: * if (path.selected) { - * path.fillColor = 'red'; + * path.fillColor = 'red'; * } * */ @@ -805,14 +805,14 @@ var Path = PathItem.extend(/** @lends Path# */{ * @example {@paperscript} * // A path is fully selected, if all of its segments are selected: * var path = new Path.Circle({ - * center: new Size(80, 50), - * radius: 35 + * center: new Size(80, 50), + * radius: 35 * }); * path.fullySelected = true; * * var path2 = new Path.Circle({ - * center: new Size(180, 50), - * radius: 35 + * center: new Size(180, 50), + * radius: 35 * }); * * // Deselect the second segment of the second path: @@ -821,14 +821,14 @@ var Path = PathItem.extend(/** @lends Path# */{ * // If the path is fully selected (which it is), * // set its fill color to red: * if (path.fullySelected) { - * path.fillColor = 'red'; + * path.fillColor = 'red'; * } * * // If the second path is fully selected (which it isn't, since we just * // deselected its second segment), * // set its fill color to red: * if (path2.fullySelected) { - * path2.fillColor = 'red'; + * path2.fillColor = 'red'; * } */ isFullySelected: function() { @@ -885,8 +885,8 @@ var Path = PathItem.extend(/** @lends Path# */{ * // Create a circle shaped path at { x: 80, y: 50 } * // with a radius of 35: * var path = new Path.Circle({ - * center: new Size(80, 50), - * radius: 35 + * center: new Size(80, 50), + * radius: 35 * }); * * // Select the path, so we can inspect its segments: @@ -943,31 +943,31 @@ var Path = PathItem.extend(/** @lends Path# */{ * * var path; * function onMouseDown(event) { - * // If we already made a path before, deselect it: - * if (path) { - * path.selected = false; - * } + * // If we already made a path before, deselect it: + * if (path) { + * path.selected = false; + * } * - * // Create a new path and add the position of the mouse - * // as its first segment. Select it, so we can see the - * // segment points: - * path = new Path({ - * segments: [event.point], - * strokeColor: 'black', - * selected: true - * }); + * // Create a new path and add the position of the mouse + * // as its first segment. Select it, so we can see the + * // segment points: + * path = new Path({ + * segments: [event.point], + * strokeColor: 'black', + * selected: true + * }); * } * * function onMouseDrag(event) { - * // On every drag event, add a segment to the path - * // at the position of the mouse: - * path.add(event.point); + * // On every drag event, add a segment to the path + * // at the position of the mouse: + * path.add(event.point); * } * * function onMouseUp(event) { - * // When the mouse is released, simplify the path: - * path.simplify(); - * path.selected = true; + * // When the mouse is released, simplify the path: + * path.simplify(); + * path.selected = true; * } */ simplify: function(tolerance) { @@ -1006,9 +1006,9 @@ var Path = PathItem.extend(/** @lends Path# */{ * * @example {@paperscript} // Splitting a closed path * var path = new Path.Rectangle({ - * from: [20, 20], - * to: [80, 80], - * strokeColor: 'black' + * from: [20, 20], + * to: [80, 80], + * strokeColor: 'black' * }); * * // Split the path at 60% of its length: @@ -1034,14 +1034,14 @@ var Path = PathItem.extend(/** @lends Path# */{ * * @example {@paperscript} * var path = new Path.Circle({ - * center: view.center, - * radius: 40, - * strokeColor: 'black' + * center: view.center, + * radius: 40, + * strokeColor: 'black' * }); * * var pointOnCircle = view.center + { - * length: 40, - * angle: 30 + * length: 40, + * angle: 30 * }; * * var curveLocation = path.getNearestLocation(pointOnCircle); @@ -1069,9 +1069,9 @@ var Path = PathItem.extend(/** @lends Path# */{ * * @example {@paperscript} // Splitting a closed path * var path = new Path.Rectangle({ - * from: [20, 20], - * to: [80, 80], - * strokeColor: 'black' + * from: [20, 20], + * to: [80, 80], + * strokeColor: 'black' * }); * * // Split the path half-way down its second curve: @@ -1199,13 +1199,13 @@ var Path = PathItem.extend(/** @lends Path# */{ * @example {@paperscript} * // Joining two paths: * var path = new Path({ - * segments: [[30, 25], [30, 75]], - * strokeColor: 'black' + * segments: [[30, 25], [30, 75]], + * strokeColor: 'black' * }); * * var path2 = new Path({ - * segments: [[200, 25], [200, 75]], - * strokeColor: 'black' + * segments: [[200, 25], [200, 75]], + * strokeColor: 'black' * }); * * // Join the paths: @@ -1215,13 +1215,13 @@ var Path = PathItem.extend(/** @lends Path# */{ * // Joining two paths that share a point at the start or end of their * // segments array: * var path = new Path({ - * segments: [[30, 25], [30, 75]], - * strokeColor: 'black' + * segments: [[30, 25], [30, 75]], + * strokeColor: 'black' * }); * * var path2 = new Path({ - * segments: [[30, 25], [80, 25]], - * strokeColor: 'black' + * segments: [[30, 25], [80, 25]], + * strokeColor: 'black' * }); * * // Join the paths: @@ -1237,13 +1237,13 @@ var Path = PathItem.extend(/** @lends Path# */{ * @example {@paperscript} * // Joining two paths that connect at two points: * var path = new Path({ - * segments: [[30, 25], [80, 25], [80, 75]], - * strokeColor: 'black' + * segments: [[30, 25], [80, 25], [80, 75]], + * strokeColor: 'black' * }); * * var path2 = new Path({ - * segments: [[30, 25], [30, 75], [80, 75]], - * strokeColor: 'black' + * segments: [[30, 25], [30, 75], [80, 75]], + * strokeColor: 'black' * }); * * // Join the paths: @@ -1406,7 +1406,7 @@ var Path = PathItem.extend(/** @lends Path# */{ * * // Create an arc shaped path: * var path = new Path({ - * strokeColor: 'black' + * strokeColor: 'black' * }); * * path.add(new Point(40, 100)); @@ -1421,9 +1421,9 @@ var Path = PathItem.extend(/** @lends Path# */{ * * // Create a small circle shaped path at the point: * var circle = new Path.Circle({ - * center: point, - * radius: 3, - * fillColor: 'red' + * center: point, + * radius: 3, + * fillColor: 'red' * }); * * @example {@paperscript height=150} @@ -1431,7 +1431,7 @@ var Path = PathItem.extend(/** @lends Path# */{ * * // Create an arc shaped path: * var path = new Path({ - * strokeColor: 'black' + * strokeColor: 'black' * }); * * path.add(new Point(40, 100)); @@ -1440,17 +1440,17 @@ var Path = PathItem.extend(/** @lends Path# */{ * var amount = 5; * var length = path.length; * for (var i = 0; i < amount + 1; i++) { - * var offset = i / amount * length; + * var offset = i / amount * length; * - * // Find the point on the path at the given offset: - * var point = path.getPointAt(offset); + * // Find the point on the path at the given offset: + * var point = path.getPointAt(offset); * - * // Create a small circle shaped path at the point: - * var circle = new Path.Circle({ - * center: point, - * radius: 3, - * fillColor: 'red' - * }); + * // Create a small circle shaped path at the point: + * var circle = new Path.Circle({ + * center: point, + * radius: 3, + * fillColor: 'red' + * }); * } */ getPointAt: function(offset, isParameter) { @@ -1470,7 +1470,7 @@ var Path = PathItem.extend(/** @lends Path# */{ * * // Create an arc shaped path: * var path = new Path({ - * strokeColor: 'black' + * strokeColor: 'black' * }); * * path.add(new Point(40, 100)); @@ -1490,8 +1490,8 @@ var Path = PathItem.extend(/** @lends Path# */{ * tangent.length = 60; * * var line = new Path({ - * segments: [point, point + tangent], - * strokeColor: 'red' + * segments: [point, point + tangent], + * strokeColor: 'red' * }) * * @example {@paperscript height=200} @@ -1499,7 +1499,7 @@ var Path = PathItem.extend(/** @lends Path# */{ * * // Create an arc shaped path: * var path = new Path({ - * strokeColor: 'black' + * strokeColor: 'black' * }); * * path.add(new Point(40, 100)); @@ -1508,21 +1508,21 @@ var Path = PathItem.extend(/** @lends Path# */{ * var amount = 6; * var length = path.length; * for (var i = 0; i < amount + 1; i++) { - * var offset = i / amount * length; + * var offset = i / amount * length; * - * // Find the point on the path at the given offset: - * var point = path.getPointAt(offset); + * // Find the point on the path at the given offset: + * var point = path.getPointAt(offset); * - * // Find the normal vector on the path at the given offset: - * var tangent = path.getTangentAt(offset); + * // Find the normal vector on the path at the given offset: + * var tangent = path.getTangentAt(offset); * - * // Make the tangent vector 60pt long: - * tangent.length = 60; + * // Make the tangent vector 60pt long: + * tangent.length = 60; * - * var line = new Path({ - * segments: [point, point + tangent], - * strokeColor: 'red' - * }) + * var line = new Path({ + * segments: [point, point + tangent], + * strokeColor: 'red' + * }) * } */ getTangentAt: function(offset, isParameter) { @@ -1542,7 +1542,7 @@ var Path = PathItem.extend(/** @lends Path# */{ * * // Create an arc shaped path: * var path = new Path({ - * strokeColor: 'black' + * strokeColor: 'black' * }); * * path.add(new Point(40, 100)); @@ -1562,8 +1562,8 @@ var Path = PathItem.extend(/** @lends Path# */{ * normal.length = 30; * * var line = new Path({ - * segments: [point, point + normal], - * strokeColor: 'red' + * segments: [point, point + normal], + * strokeColor: 'red' * }); * * @example {@paperscript height=200} @@ -1571,7 +1571,7 @@ var Path = PathItem.extend(/** @lends Path# */{ * * // Create an arc shaped path: * var path = new Path({ - * strokeColor: 'black' + * strokeColor: 'black' * }); * * path.add(new Point(40, 100)); @@ -1580,21 +1580,21 @@ var Path = PathItem.extend(/** @lends Path# */{ * var amount = 10; * var length = path.length; * for (var i = 0; i < amount + 1; i++) { - * var offset = i / amount * length; + * var offset = i / amount * length; * - * // Find the point on the path at the given offset: - * var point = path.getPointAt(offset); + * // Find the point on the path at the given offset: + * var point = path.getPointAt(offset); * - * // Find the normal vector on the path at the given offset: - * var normal = path.getNormalAt(offset); + * // Find the normal vector on the path at the given offset: + * var normal = path.getNormalAt(offset); * - * // Make the normal vector 30pt long: - * normal.length = 30; + * // Make the normal vector 30pt long: + * normal.length = 30; * - * var line = new Path({ - * segments: [point, point + normal], - * strokeColor: 'red' - * }); + * var line = new Path({ + * segments: [point, point + normal], + * strokeColor: 'red' + * }); * } */ getNormalAt: function(offset, isParameter) { @@ -1635,26 +1635,26 @@ var Path = PathItem.extend(/** @lends Path# */{ * * @example {@paperscript height=200} * var star = new Path.Star({ - * center: view.center, - * points: 10, - * radius1: 30, - * radius2: 60, - * strokeColor: 'black' + * center: view.center, + * points: 10, + * radius1: 30, + * radius2: 60, + * strokeColor: 'black' * }); * * var circle = new Path.Circle({ - * center: view.center, - * radius: 3, - * fillColor: 'red' + * center: view.center, + * radius: 3, + * fillColor: 'red' * }); * * function onMouseMove(event) { - * // Get the nearest point from the mouse position - * // to the star shaped path: - * var nearestPoint = star.getNearestPoint(event.point); + * // Get the nearest point from the mouse position + * // to the star shaped path: + * var nearestPoint = star.getNearestPoint(event.point); * - * // Move the red circle to the nearest point: - * circle.position = nearestPoint; + * // Move the red circle to the nearest point: + * circle.position = nearestPoint; * } */ getNearestPoint: function(point) { // TODO: Fix argument assignment! diff --git a/src/path/PathItem.js b/src/path/PathItem.js index 4fdba676..d91cf0ca 100644 --- a/src/path/PathItem.js +++ b/src/path/PathItem.js @@ -47,19 +47,19 @@ var PathItem = Item.extend(/** @lends PathItem# */{ * var intersectionGroup = new Group(); * * function onFrame(event) { - * secondPath.rotate(3); + * secondPath.rotate(3); * - * var intersections = path.getIntersections(secondPath); - * intersectionGroup.removeChildren(); + * var intersections = path.getIntersections(secondPath); + * intersectionGroup.removeChildren(); * - * for (var i = 0; i < intersections.length; i++) { - * var intersectionPath = new Path.Circle({ - * center: intersections[i].point, - * radius: 4, - * fillColor: 'red' - * }); - * intersectionGroup.addChild(intersectionPath); - * } + * for (var i = 0; i < intersections.length; i++) { + * var intersectionPath = new Path.Circle({ + * center: intersections[i].point, + * radius: 4, + * fillColor: 'red' + * }); + * intersectionGroup.addChild(intersectionPath); + * } * } */ getIntersections: function(path, _expand) { @@ -438,22 +438,22 @@ var PathItem = Item.extend(/** @lends PathItem# */{ * * var myPath; * function onMouseMove(event) { - * // If we created a path before, remove it: - * if (myPath) { - * myPath.remove(); - * } + * // If we created a path before, remove it: + * if (myPath) { + * myPath.remove(); + * } * - * // Create a new path and add a segment point to it - * // at {x: 150, y: 150): - * myPath = new Path(); - * myPath.add(150, 150); + * // Create a new path and add a segment point to it + * // at {x: 150, y: 150): + * myPath = new Path(); + * myPath.add(150, 150); * - * // Draw a curve through the position of the mouse to 'toPoint' - * var toPoint = new Point(350, 150); - * myPath.curveTo(event.point, toPoint); + * // Draw a curve through the position of the mouse to 'toPoint' + * var toPoint = new Point(350, 150); + * myPath.curveTo(event.point, toPoint); * - * // Select the path, so we can see its segments: - * myPath.selected = true; + * // Select the path, so we can see its segments: + * myPath.selected = true; * } */ @@ -492,29 +492,29 @@ var PathItem = Item.extend(/** @lends PathItem# */{ * * var myPath; * function onMouseDrag(event) { - * // If we created a path before, remove it: - * if (myPath) { - * myPath.remove(); - * } + * // If we created a path before, remove it: + * if (myPath) { + * myPath.remove(); + * } * - * // Create a new path and add a segment point to it - * // at {x: 150, y: 150): - * myPath = new Path(); - * myPath.add(150, 150); + * // Create a new path and add a segment point to it + * // at {x: 150, y: 150): + * myPath = new Path(); + * myPath.add(150, 150); * - * // Draw an arc through the position of the mouse to 'toPoint' - * var toPoint = new Point(350, 150); - * myPath.arcTo(event.point, toPoint); + * // Draw an arc through the position of the mouse to 'toPoint' + * var toPoint = new Point(350, 150); + * myPath.arcTo(event.point, toPoint); * - * // Select the path, so we can see its segments: - * myPath.selected = true; + * // Select the path, so we can see its segments: + * myPath.selected = true; * } * * // When the mouse is released, deselect the path * // and fill it with black. * function onMouseUp(event) { - * myPath.selected = false; - * myPath.fillColor = 'black'; + * myPath.selected = false; + * myPath.fillColor = 'black'; * } */ /** @@ -553,15 +553,15 @@ var PathItem = Item.extend(/** @lends PathItem# */{ * // When the user clicks, create a new path and add * // the current mouse position to it as its first segment: * function onMouseDown(event) { - * myPath = new Path(); - * myPath.strokeColor = 'black'; - * myPath.add(event.point); + * myPath = new Path(); + * myPath.strokeColor = 'black'; + * myPath.add(event.point); * } * * // On each mouse drag event, draw an arc to the current * // position of the mouse: * function onMouseDrag(event) { - * myPath.arcTo(event.point); + * myPath.arcTo(event.point); * } */ // DOCS: PathItem#arcTo(to, radius, rotation, clockwise, large) @@ -621,14 +621,14 @@ var PathItem = Item.extend(/** @lends PathItem# */{ * * // Loop 500 times: * for (var i = 0; i < 500; i++) { - * // Create a vector with an ever increasing length - * // and an angle in increments of 45 degrees - * var vector = new Point({ - * angle: i * 45, - * length: i / 2 - * }); - * // Add the vector relatively to the last segment point: - * path.lineBy(vector); + * // Create a vector with an ever increasing length + * // and an angle in increments of 45 degrees + * var vector = new Point({ + * angle: i * 45, + * length: i / 2 + * }); + * // Add the vector relatively to the last segment point: + * path.lineBy(vector); * } * * // Smooth the handles of the path: diff --git a/src/path/Segment.js b/src/path/Segment.js index 80c44b57..8d8b36dc 100644 --- a/src/path/Segment.js +++ b/src/path/Segment.js @@ -61,18 +61,18 @@ var Segment = Base.extend(/** @lends Segment# */{ * @example {@paperscript} * // Creating segments using object notation: * var firstSegment = new Segment({ - * point: [100, 50], - * handleOut: [80, 100] + * point: [100, 50], + * handleOut: [80, 100] * }); * * var secondSegment = new Segment({ - * point: [300, 50], - * handleIn: [-80, -100] + * point: [300, 50], + * handleIn: [-80, -100] * }); * * var path = new Path({ - * segments: [firstSegment, secondSegment], - * strokeColor: 'black' + * segments: [firstSegment, secondSegment], + * strokeColor: 'black' * }); */ /** @@ -307,8 +307,8 @@ var Segment = Base.extend(/** @lends Segment# */{ * @bean * @example {@paperscript} * var path = new Path.Circle({ - * center: [80, 50], - * radius: 40 + * center: [80, 50], + * radius: 40 * }); * * // Select the third segment point: diff --git a/src/project/Project.js b/src/project/Project.js index 484ba168..3bc13910 100644 --- a/src/project/Project.js +++ b/src/project/Project.js @@ -136,9 +136,9 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{ * * @example {@paperscript} * project.currentStyle = { - * fillColor: 'red', - * strokeColor: 'black', - * strokeWidth: 5 + * fillColor: 'red', + * strokeColor: 'black', + * strokeWidth: 5 * } * * // The following paths will take over all style properties of diff --git a/src/style/Color.js b/src/style/Color.js index fcb34705..598a8070 100644 --- a/src/style/Color.js +++ b/src/style/Color.js @@ -452,17 +452,17 @@ var Color = Base.extend(new function() { * // Create a circle shaped path at the center of the view * // with a radius of 80: * var path = new Path.Circle({ - * center: view.center, - * radius: 80 + * center: view.center, + * radius: 80 * }); * * // The stops array: yellow mixes with red between 0 and 15%, * // 15% to 30% is pure red, red mixes with black between 30% to 100%: * var stops = [ - * ['yellow', 0], - * ['red', 0.15], - * ['red', 0.3], - * ['black', 0.9] + * ['yellow', 0], + * ['red', 0.15], + * ['red', 0.3], + * ['black', 0.9] * ]; * * // Create a radial gradient using the color stops array: diff --git a/src/style/Gradient.js b/src/style/Gradient.js index ba2daf91..a782da99 100644 --- a/src/style/Gradient.js +++ b/src/style/Gradient.js @@ -27,17 +27,17 @@ * // Create a rectangle shaped path between * // the topLeft and bottomRight points: * var path = new Path.Rectangle({ - * topLeft: topLeft, - * bottomRight: bottomRight, - * // Fill the path with a gradient of three color stops - * // that runs between the two points we defined earlier: - * fillColor: { - * gradient: { - * stops: ['yellow', 'red', 'blue'] - * }, - * origin: topLeft, - * destination: bottomRight - * } + * topLeft: topLeft, + * bottomRight: bottomRight, + * // Fill the path with a gradient of three color stops + * // that runs between the two points we defined earlier: + * fillColor: { + * gradient: { + * stops: ['yellow', 'red', 'blue'] + * }, + * origin: topLeft, + * destination: bottomRight + * } * }); * * @classexample {@paperscript height=300} @@ -45,20 +45,20 @@ * // using 40% of the height of the view as its radius * // and fill it with a radial gradient color: * var path = new Path.Circle({ - * center: view.center, - * radius: view.bounds.height * 0.4 + * center: view.center, + * radius: view.bounds.height * 0.4 * }); * * // Fill the path with a radial gradient color with three stops: * // yellow from 0% to 5%, mix between red from 5% to 20%, * // mix between red and black from 20% to 100%: * path.fillColor = { - * gradient: { - * stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]], - * radial: true - * }, - * origin: path.position, - * destination: path.bounds.rightCenter + * gradient: { + * stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]], + * radial: true + * }, + * origin: path.position, + * destination: path.bounds.rightCenter * }; */ var Gradient = Base.extend(/** @lends Gradient# */{ diff --git a/src/style/GradientStop.js b/src/style/GradientStop.js index 7b75de3a..5f5ea066 100644 --- a/src/style/GradientStop.js +++ b/src/style/GradientStop.js @@ -85,30 +85,30 @@ var GradientStop = Base.extend(/** @lends GradientStop# */{ * // using 40% of the height of the view as its radius * // and fill it with a radial gradient color: * var path = new Path.Circle({ - * center: view.center, - * radius: view.bounds.height * 0.4 + * center: view.center, + * radius: view.bounds.height * 0.4 * }); * * path.fillColor = { - * gradient: { - * stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]], - * radial: true - * }, - * origin: path.position, - * destination: path.bounds.rightCenter + * gradient: { + * stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]], + * radial: true + * }, + * origin: path.position, + * destination: path.bounds.rightCenter * }; * * var gradient = path.fillColor.gradient; * * // This function is called each frame of the animation: * function onFrame(event) { - * var blackStop = gradient.stops[2]; - * // Animate the rampPoint between 0.7 and 0.9: - * blackStop.rampPoint = Math.sin(event.time * 5) * 0.1 + 0.8; + * var blackStop = gradient.stops[2]; + * // Animate the rampPoint between 0.7 and 0.9: + * blackStop.rampPoint = Math.sin(event.time * 5) * 0.1 + 0.8; * - * // Animate the rampPoint between 0.2 and 0.4 - * var redStop = gradient.stops[1]; - * redStop.rampPoint = Math.sin(event.time * 3) * 0.1 + 0.3; + * // Animate the rampPoint between 0.2 and 0.4 + * var redStop = gradient.stops[1]; + * redStop.rampPoint = Math.sin(event.time * 3) * 0.1 + 0.3; * } */ getRampPoint: function() { @@ -134,17 +134,17 @@ var GradientStop = Base.extend(/** @lends GradientStop# */{ * // using 40% of the height of the view as its radius * // and fill it with a radial gradient color: * var path = new Path.Circle({ - * center: view.center, - * radius: view.bounds.height * 0.4 + * center: view.center, + * radius: view.bounds.height * 0.4 * }); * * path.fillColor = { - * gradient: { - * stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]], - * radial: true - * }, - * origin: path.position, - * destination: path.bounds.rightCenter + * gradient: { + * stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]], + * radial: true + * }, + * origin: path.position, + * destination: path.bounds.rightCenter * }; * * var redStop = path.fillColor.gradient.stops[1]; @@ -152,11 +152,11 @@ var GradientStop = Base.extend(/** @lends GradientStop# */{ * * // This function is called each frame of the animation: * function onFrame(event) { - * // Animate the rampPoint between 0.7 and 0.9: - * blackStop.rampPoint = Math.sin(event.time * 5) * 0.1 + 0.8; + * // Animate the rampPoint between 0.7 and 0.9: + * blackStop.rampPoint = Math.sin(event.time * 5) * 0.1 + 0.8; * - * // Animate the rampPoint between 0.2 and 0.4 - * redStop.rampPoint = Math.sin(event.time * 3) * 0.1 + 0.3; + * // Animate the rampPoint between 0.2 and 0.4 + * redStop.rampPoint = Math.sin(event.time * 3) * 0.1 + 0.3; * } */ getColor: function() { diff --git a/src/style/Style.js b/src/style/Style.js index 8b5e3908..db617cb3 100644 --- a/src/style/Style.js +++ b/src/style/Style.js @@ -28,31 +28,31 @@ * * var path = new Path.Circle(new Point(80, 50), 30); * path.style = { - * fillColor: new Color(1, 0, 0), - * strokeColor: 'black', - * strokeWidth: 5 + * fillColor: new Color(1, 0, 0), + * strokeColor: 'black', + * strokeWidth: 5 * }; * * @classexample {@paperscript} // Styling text items * var text = new PointText(view.center); * text.content = 'Hello world.'; * text.style = { - * fontFamily: 'Courier New', - * fontWeight: 'bold', - * fontSize: 20, - * fillColor: 'red', - * justification: 'center' + * fontFamily: 'Courier New', + * fontWeight: 'bold', + * fontSize: 20, + * fillColor: 'red', + * justification: 'center' * }; * * @classexample {@paperscript} // Styling groups * var path1 = new Path.Circle({ - * center: [100, 50], - * radius: 30 + * center: [100, 50], + * radius: 30 * }); * * var path2 = new Path.Rectangle({ - * from: [170, 20], - * to: [230, 80] + * from: [170, 20], + * to: [230, 80] * }); * * var group = new Group(path1, path2); @@ -60,10 +60,10 @@ * // All styles set on a group are automatically * // set on the children of the group: * group.style = { - * strokeColor: 'black', - * dashArray: [4, 10], - * strokeWidth: 4, - * strokeCap: 'round' + * strokeColor: 'black', + * dashArray: [4, 10], + * strokeWidth: 4, + * strokeCap: 'round' * }; * */ diff --git a/src/text/PointText.js b/src/text/PointText.js index e48d5143..160f7a94 100644 --- a/src/text/PointText.js +++ b/src/text/PointText.js @@ -46,12 +46,12 @@ var PointText = TextItem.extend(/** @lends PointText# */{ * * @example {@paperscript} * var text = new PointText({ - * point: [50, 50], - * content: 'The contents of the point text', - * fillColor: 'black', - * fontFamily: 'Courier New', - * fontWeight: 'bold', - * fontSize: 25 + * point: [50, 50], + * content: 'The contents of the point text', + * fillColor: 'black', + * fontFamily: 'Courier New', + * fontWeight: 'bold', + * fontSize: 25 * }); */ initialize: function PointText() { diff --git a/src/text/TextItem.js b/src/text/TextItem.js index 273ffd29..1933d537 100644 --- a/src/text/TextItem.js +++ b/src/text/TextItem.js @@ -81,9 +81,9 @@ var TextItem = Item.extend(/** @lends TextItem# */{ * text.content = 'Move your mouse over the view, to see its position'; * * function onMouseMove(event) { - * // Each time the mouse is moved, set the content of - * // the point text to describe the position of the mouse: - * text.content = 'Your position is: ' + event.point.toString(); + * // Each time the mouse is moved, set the content of + * // the point text to describe the position of the mouse: + * text.content = 'Your position is: ' + event.point.toString(); * } */ getContent: function() { diff --git a/src/tool/Tool.js b/src/tool/Tool.js index 0d02490d..6661c02b 100644 --- a/src/tool/Tool.js +++ b/src/tool/Tool.js @@ -31,15 +31,15 @@ * tool.distanceThreshold = 10; * * function onMouseDown(event) { - * // Create a new path every time the mouse is clicked - * path = new Path(); - * path.add(event.point); - * path.strokeColor = 'black'; + * // Create a new path every time the mouse is clicked + * path = new Path(); + * path.add(event.point); + * path.strokeColor = 'black'; * } * * function onMouseDrag(event) { - * // Add a point to the path every time the mouse is dragged - * path.add(event.point); + * // Add a point to the path every time the mouse is dragged + * path.add(event.point); * } */ var Tool = PaperScopeItem.extend(/** @lends Tool# */{ @@ -141,13 +141,13 @@ var Tool = PaperScopeItem.extend(/** @lends Tool# */{ * @example {@paperscript} * // Creating circle shaped paths where the user presses the mouse button: * function onMouseDown(event) { - * // Create a new circle shaped path with a radius of 10 - * // at the position of the mouse (event.point): - * var path = new Path.Circle({ - * center: event.point, - * radius: 10, - * fillColor: 'black' - * }); + * // Create a new circle shaped path with a radius of 10 + * // at the position of the mouse (event.point): + * var path = new Path.Circle({ + * center: event.point, + * radius: 10, + * fillColor: 'black' + * }); * } */ @@ -165,12 +165,12 @@ var Tool = PaperScopeItem.extend(/** @lends Tool# */{ * * // Create an empty path: * var path = new Path({ - * strokeColor: 'black' + * strokeColor: 'black' * }); * * function onMouseDrag(event) { - * // Add a segment to the path at the position of the mouse: - * path.add(event.point); + * // Add a segment to the path at the position of the mouse: + * path.add(event.point); * } */ @@ -188,15 +188,15 @@ var Tool = PaperScopeItem.extend(/** @lends Tool# */{ * * // Create a circle shaped path with a radius of 10 at {x: 0, y: 0}: * var path = new Path.Circle({ - * center: [0, 0], - * radius: 10, - * fillColor: 'black' + * center: [0, 0], + * radius: 10, + * fillColor: 'black' * }); * * function onMouseMove(event) { - * // Whenever the user moves the mouse, move the path - * // to that position: - * path.position = event.point; + * // Whenever the user moves the mouse, move the path + * // to that position: + * path.position = event.point; * } */ @@ -212,13 +212,13 @@ var Tool = PaperScopeItem.extend(/** @lends Tool# */{ * @example {@paperscript} * // Creating circle shaped paths where the user releases the mouse: * function onMouseUp(event) { - * // Create a new circle shaped path with a radius of 10 - * // at the position of the mouse (event.point): - * var path = new Path.Circle({ - * center: event.point, - * radius: 10, - * fillColor: 'black' - * }); + * // Create a new circle shaped path with a radius of 10 + * // at the position of the mouse (event.point): + * var path = new Path.Circle({ + * center: event.point, + * radius: 10, + * fillColor: 'black' + * }); * } */ @@ -241,20 +241,20 @@ var Tool = PaperScopeItem.extend(/** @lends Tool# */{ * // Scaling a path whenever the user presses the space bar: * * // Create a circle shaped path: - * var path = new Path.Circle({ - * center: new Point(50, 50), - * radius: 30, - * fillColor: 'red' - * }); + * var path = new Path.Circle({ + * center: new Point(50, 50), + * radius: 30, + * fillColor: 'red' + * }); * * function onKeyDown(event) { - * if (event.key == 'space') { - * // Scale the path by 110%: - * path.scale(1.1); + * if (event.key == 'space') { + * // Scale the path by 110%: + * path.scale(1.1); * - * // Prevent the key event from bubbling - * return false; - * } + * // Prevent the key event from bubbling + * return false; + * } * } */ @@ -273,9 +273,9 @@ var Tool = PaperScopeItem.extend(/** @lends Tool# */{ * * @example * function onKeyUp(event) { - * if (event.key == 'space') { - * console.log('The spacebar was released!'); - * } + * if (event.key == 'space') { + * console.log('The spacebar was released!'); + * } * } */ diff --git a/src/tool/ToolEvent.js b/src/tool/ToolEvent.js index 730d8b75..8f7b458c 100644 --- a/src/tool/ToolEvent.js +++ b/src/tool/ToolEvent.js @@ -53,13 +53,13 @@ var ToolEvent = Event.extend(/** @lends ToolEvent# */{ * * @example * function onMouseDrag(event) { - * // the position of the mouse when it is dragged - * console.log(event.point); + * // the position of the mouse when it is dragged + * console.log(event.point); * } * * function onMouseUp(event) { - * // the position of the mouse when it is released - * console.log(event.point); + * // the position of the mouse when it is released + * console.log(event.point); * } * * @type Point diff --git a/src/ui/Key.js b/src/ui/Key.js index 51d703a1..f5cea964 100644 --- a/src/ui/Key.js +++ b/src/ui/Key.js @@ -155,12 +155,12 @@ var Key = new function() { * // Whenever the user clicks, create a circle shaped path. If the * // 'a' key is pressed, fill it with red, otherwise fill it with blue: * function onMouseDown(event) { - * var path = new Path.Circle(event.point, 10); - * if (Key.isDown('a')) { - * path.fillColor = 'red'; - * } else { - * path.fillColor = 'blue'; - * } + * var path = new Path.Circle(event.point, 10); + * if (Key.isDown('a')) { + * path.fillColor = 'red'; + * } else { + * path.fillColor = 'blue'; + * } * } */ isDown: function(key) { diff --git a/src/ui/View.js b/src/ui/View.js index a5c62317..583f3db0 100644 --- a/src/ui/View.js +++ b/src/ui/View.js @@ -520,8 +520,8 @@ var View = Base.extend(Callback, /** @lends View# */{ * path.fillColor = 'black'; * * function onFrame(event) { - * // Every frame, rotate the path by 3 degrees: - * path.rotate(3); + * // Every frame, rotate the path by 3 degrees: + * path.rotate(3); * } * * @name View#onFrame @@ -540,8 +540,8 @@ var View = Base.extend(Callback, /** @lends View# */{ * path.fillColor = 'red'; * * function onResize(event) { - * // Whenever the view is resized, move the path to its center: - * path.position = view.center; + * // Whenever the view is resized, move the path to its center: + * path.position = view.center; * } * * @name View#onResize @@ -567,8 +567,8 @@ var View = Base.extend(Callback, /** @lends View# */{ * path.fillColor = 'black'; * * var frameHandler = function(event) { - * // Every frame, rotate the path by 3 degrees: - * path.rotate(3); + * // Every frame, rotate the path by 3 degrees: + * path.rotate(3); * }; * * view.on('frame', frameHandler); @@ -587,12 +587,12 @@ var View = Base.extend(Callback, /** @lends View# */{ * path.fillColor = 'black'; * * var frameHandler = function(event) { - * // Every frame, rotate the path by 3 degrees: - * path.rotate(3); + * // Every frame, rotate the path by 3 degrees: + * path.rotate(3); * }; * * view.on({ - * frame: frameHandler + * frame: frameHandler * }); */ @@ -612,18 +612,18 @@ var View = Base.extend(Callback, /** @lends View# */{ * path.fillColor = 'black'; * * var frameHandler = function(event) { - * // Every frame, rotate the path by 3 degrees: - * path.rotate(3); + * // Every frame, rotate the path by 3 degrees: + * path.rotate(3); * }; * * view.on({ - * frame: frameHandler + * frame: frameHandler * }); * * // When the user presses the mouse, * // detach the frame handler from the view: * function onMouseDown(event) { - * view.detach('frame'); + * view.detach('frame'); * } */ /**