diff --git a/src/item/Raster.js b/src/item/Raster.js index 2509e661..9f464634 100644 --- a/src/item/Raster.js +++ b/src/item/Raster.js @@ -367,7 +367,13 @@ var Raster = Item.extend(/** @lends Raster# */{ // DOCS: document Raster#getElement getElement: function() { return this._canvas || this._image; - }, + } +}, /** @lends Raster# */{ + // Explicitly deactivate the creation of beans, as we have functions here + // that look like bean getters but actually read arguments. + // See #getSubCanvas(), #getSubRaster(), #getSubRaster(), #getPixel(), + // #getImageData() + beans: false, /** * Extracts a part of the Raster's content as a sub image, and returns it as @@ -378,7 +384,7 @@ var Raster = Item.extend(/** @lends Raster# */{ * * @return {Canvas} the sub image as a Canvas object */ - getSubCanvas: function(rect) { // TODO: Fix argument assignment! + getSubCanvas: function(/* rect */) { var rect = Rectangle.read(arguments), ctx = CanvasProvider.getContext(rect.getSize()); ctx.drawImage(this.getCanvas(), rect.x, rect.y, @@ -395,7 +401,7 @@ var Raster = Item.extend(/** @lends Raster# */{ * * @return {Raster} the sub raster as a newly created raster item */ - getSubRaster: function(rect) { // TODO: Fix argument assignment! + getSubRaster: function(/* rect */) { var rect = Rectangle.read(arguments), raster = new Raster(Item.NO_INSERT); raster.setCanvas(this.getSubCanvas(rect)); @@ -532,7 +538,7 @@ var Raster = Item.extend(/** @lends Raster# */{ * @param point the offset of the pixel as a point in pixel coordinates * @return {Color} the color of the pixel */ - getPixel: function(point) { // TODO: Fix argument assignment! + getPixel: function(/* point */) { var point = Point.read(arguments); var data = this.getContext().getImageData(point.x, point.y, 1, 1).data; // Alpha is separate now: @@ -588,7 +594,7 @@ var Raster = Item.extend(/** @lends Raster# */{ * @param {Rectangle} rect * @return {ImageData} */ - getImageData: function(rect) { // TODO: Fix argument assignment! + getImageData: function(/* rect */) { var rect = Rectangle.read(arguments); if (rect.isEmpty()) rect = new Rectangle(this._size); diff --git a/src/path/Curve.js b/src/path/Curve.js index 166460d6..4ce2d1e8 100644 --- a/src/path/Curve.js +++ b/src/path/Curve.js @@ -798,6 +798,11 @@ statics: { }; }, /** @lends Curve# */{ + // Explicitly deactivate the creation of beans, as we have functions here + // that look like bean getters but actually read arguments. + // See #getParameterOf(), #getLocationOf(), #getNearestLocation(), ... + beans: false, + /** * Calculates the curve time parameter of the specified offset on the path, * relative to the provided start parameter. If offset is a negative value, @@ -819,7 +824,7 @@ statics: { * @param {Point} point the point on the curve. * @return {Number} the curve time parameter of the specified point. */ - getParameterOf: function(point) { // TODO: Fix argument assignment! + getParameterOf: function(/* point */) { var point = Point.read(arguments); return Curve.getParameterOf(this.getValues(), point.x, point.y); }, @@ -845,15 +850,13 @@ statics: { * @param {Point} point the point on the curve. * @return {CurveLocation} the curve location of the specified point. */ - getLocationOf: function(point) { // TODO: Fix argument assignment! - // We need to use point to avoid minification issues and prevent method - // from turning into a bean (by removal of the point argument). + getLocationOf: function(/* point */) { var point = Point.read(arguments), t = this.getParameterOf(point); return t != null ? new CurveLocation(this, t) : null; }, - getNearestLocation: function(point) { // TODO: Fix argument assignment! + getNearestLocation: function(/* point */) { var point = Point.read(arguments), values = this.getValues(), count = 100, @@ -886,11 +889,8 @@ statics: { point.getDistance(pt)); }, - getNearestPoint: function(point) { - // We need to use point to avoid minification issues and prevent method - // from turning into a bean (by removal of the point argument). - var point = Point.read(arguments); - return this.getNearestLocation(point).getPoint(); + getNearestPoint: function(/* point */) { + return this.getNearestLocation.apply(this, arguments).getPoint(); } /** diff --git a/src/path/Path.js b/src/path/Path.js index a1d74bb9..d1d76e13 100644 --- a/src/path/Path.js +++ b/src/path/Path.js @@ -755,6 +755,37 @@ var Path = PathItem.extend(/** @lends Path# */{ // DOCS Path#clear() clear: '#removeSegments', + /** + * The approximate length of the path in points. + * + * @type Number + * @bean + */ + getLength: function() { + if (this._length == null) { + var curves = this.getCurves(); + this._length = 0; + for (var i = 0, l = curves.length; i < l; i++) + this._length += curves[i].getLength(); + } + return this._length; + }, + + /** + * The area of the path in square points. Self-intersecting paths can + * contain sub-areas that cancel each other out. + * + * @type Number + * @bean + */ + getArea: function() { + var curves = this.getCurves(); + var area = 0; + for (var i = 0, l = curves.length; i < l; i++) + area += curves[i].getArea(); + return area; + }, + /** * Specifies whether an path is selected and will also return {@code true} * if the path is partially selected, i.e. one or more of its segments is @@ -1298,372 +1329,6 @@ var Path = PathItem.extend(/** @lends Path# */{ } }, - /** - * The approximate length of the path in points. - * - * @type Number - * @bean - */ - getLength: function() { - if (this._length == null) { - var curves = this.getCurves(); - this._length = 0; - for (var i = 0, l = curves.length; i < l; i++) - this._length += curves[i].getLength(); - } - return this._length; - }, - - /** - * The area of the path in square points. Self-intersecting paths can - * contain sub-areas that cancel each other out. - * - * @type Number - * @bean - */ - getArea: function() { - var curves = this.getCurves(); - var area = 0; - for (var i = 0, l = curves.length; i < l; i++) - area += curves[i].getArea(); - return area; - }, - - _getOffset: function(location) { - var index = location && location.getIndex(); - if (index != null) { - var curves = this.getCurves(), - offset = 0; - for (var i = 0; i < index; i++) - offset += curves[i].getLength(); - var curve = curves[index], - parameter = location.getParameter(); - if (parameter > 0) - offset += curve.getPartLength(0, parameter); - return offset; - } - return null; - }, - - /** - * Returns the curve location of the specified point if it lies on the - * path, {@code null} otherwise. - * @param {Point} point the point on the path. - * @return {CurveLocation} the curve location of the specified point. - */ - getLocationOf: function(point) { // TODO: Fix argument assignment! - var point = Point.read(arguments), - curves = this.getCurves(); - for (var i = 0, l = curves.length; i < l; i++) { - var loc = curves[i].getLocationOf(point); - if (loc) - return loc; - } - return null; - }, - - // DOCS: document Path#getLocationAt - /** - * {@grouptitle Positions on Paths and Curves} - * - * @param {Number} offset - * @param {Boolean} [isParameter=false] - * @return {CurveLocation} - */ - getLocationAt: function(offset, isParameter) { - var curves = this.getCurves(), - length = 0; - if (isParameter) { - // offset consists of curve index and curve parameter, before and - // after the fractional digit. - var index = ~~offset; // = Math.floor() - return curves[index].getLocationAt(offset - index, true); - } - for (var i = 0, l = curves.length; i < l; i++) { - var start = length, - curve = curves[i]; - length += curve.getLength(); - if (length > offset) { - // Found the segment within which the length lies - return curve.getLocationAt(offset - start); - } - } - // It may be that through imprecision of getLength, that the end of the - // last curve was missed: - if (offset <= this.getLength()) - return new CurveLocation(curves[curves.length - 1], 1); - return null; - }, - - /** - * Calculates the point on the path at the given offset. - * - * @param {Number} offset - * @param {Boolean} [isParameter=false] - * @return {Point} the point at the given offset - * - * @example {@paperscript height=150} - * // Finding the point on a path at a given offset: - * - * // Create an arc shaped path: - * var path = new Path({ - * strokeColor: 'black' - * }); - * - * path.add(new Point(40, 100)); - * path.arcTo(new Point(150, 100)); - * - * // We're going to be working with a third of the length - * // of the path as the offset: - * var offset = path.length / 3; - * - * // Find the point on the path: - * 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' - * }); - * - * @example {@paperscript height=150} - * // Iterating over the length of a path: - * - * // Create an arc shaped path: - * var path = new Path({ - * strokeColor: 'black' - * }); - * - * path.add(new Point(40, 100)); - * path.arcTo(new Point(150, 100)); - * - * var amount = 5; - * var length = path.length; - * for (var i = 0; i < amount + 1; i++) { - * var offset = i / amount * length; - * - * // 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' - * }); - * } - */ - getPointAt: function(offset, isParameter) { - var loc = this.getLocationAt(offset, isParameter); - return loc && loc.getPoint(); - }, - - /** - * Calculates the tangent to the path at the given offset as a vector point. - * - * @param {Number} offset - * @param {Boolean} [isParameter=false] - * @return {Point} the tangent vector at the given offset - * - * @example {@paperscript height=150} - * // Working with the tangent vector at a given offset: - * - * // Create an arc shaped path: - * var path = new Path({ - * strokeColor: 'black' - * }); - * - * path.add(new Point(40, 100)); - * path.arcTo(new Point(150, 100)); - * - * // We're going to be working with a third of the length - * // of the path as the offset: - * var offset = path.length / 3; - * - * // Find the point on the path: - * var point = path.getPointAt(offset); - * - * // Find the tangent vector at the given offset: - * var tangent = path.getTangentAt(offset); - * - * // Make the tangent vector 60pt long: - * tangent.length = 60; - * - * var line = new Path({ - * segments: [point, point + tangent], - * strokeColor: 'red' - * }) - * - * @example {@paperscript height=200} - * // Iterating over the length of a path: - * - * // Create an arc shaped path: - * var path = new Path({ - * strokeColor: 'black' - * }); - * - * path.add(new Point(40, 100)); - * path.arcTo(new Point(150, 100)); - * - * var amount = 6; - * var length = path.length; - * for (var i = 0; i < amount + 1; i++) { - * var offset = i / amount * length; - * - * // 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); - * - * // Make the tangent vector 60pt long: - * tangent.length = 60; - * - * var line = new Path({ - * segments: [point, point + tangent], - * strokeColor: 'red' - * }) - * } - */ - getTangentAt: function(offset, isParameter) { - var loc = this.getLocationAt(offset, isParameter); - return loc && loc.getTangent(); - }, - - /** - * Calculates the normal to the path at the given offset as a vector point. - * - * @param {Number} offset - * @param {Boolean} [isParameter=false] - * @return {Point} the normal vector at the given offset - * - * @example {@paperscript height=150} - * // Working with the normal vector at a given offset: - * - * // Create an arc shaped path: - * var path = new Path({ - * strokeColor: 'black' - * }); - * - * path.add(new Point(40, 100)); - * path.arcTo(new Point(150, 100)); - * - * // We're going to be working with a third of the length - * // of the path as the offset: - * var offset = path.length / 3; - * - * // Find the point on the path: - * var point = path.getPointAt(offset); - * - * // Find the normal vector at the given offset: - * var normal = path.getNormalAt(offset); - * - * // Make the normal vector 30pt long: - * normal.length = 30; - * - * var line = new Path({ - * segments: [point, point + normal], - * strokeColor: 'red' - * }); - * - * @example {@paperscript height=200} - * // Iterating over the length of a path: - * - * // Create an arc shaped path: - * var path = new Path({ - * strokeColor: 'black' - * }); - * - * path.add(new Point(40, 100)); - * path.arcTo(new Point(150, 100)); - * - * var amount = 10; - * var length = path.length; - * for (var i = 0; i < amount + 1; i++) { - * var offset = i / amount * length; - * - * // 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); - * - * // Make the normal vector 30pt long: - * normal.length = 30; - * - * var line = new Path({ - * segments: [point, point + normal], - * strokeColor: 'red' - * }); - * } - */ - getNormalAt: function(offset, isParameter) { - var loc = this.getLocationAt(offset, isParameter); - return loc && loc.getNormal(); - }, - - /** - * Returns the nearest location on the path to the specified point. - * - * @function - * @param point {Point} the point for which we search the nearest location - * @return {CurveLocation} the location on the path that's the closest to - * the specified point - */ - getNearestLocation: function(point) { // TODO: Fix argument assignment! - var point = Point.read(arguments), - curves = this.getCurves(), - minDist = Infinity, - minLoc = null; - for (var i = 0, l = curves.length; i < l; i++) { - var loc = curves[i].getNearestLocation(point); - if (loc._distance < minDist) { - minDist = loc._distance; - minLoc = loc; - } - } - return minLoc; - }, - - /** - * Returns the nearest point on the path to the specified point. - * - * @function - * @param point {Point} the point for which we search the nearest point - * @return {Point} the point on the path that's the closest to the specified - * point - * - * @example {@paperscript height=200} - * var star = new Path.Star({ - * center: view.center, - * points: 10, - * radius1: 30, - * radius2: 60, - * strokeColor: 'black' - * }); - * - * var circle = new Path.Circle({ - * 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); - * - * // Move the red circle to the nearest point: - * circle.position = nearestPoint; - * } - */ - getNearestPoint: function(point) { // TODO: Fix argument assignment! - // We need to use point to avoid minification issues and prevent method - // from turning into a bean (by removal of the point argument). - var point = Point.read(arguments); - return this.getNearestLocation(point).getPoint(); - }, // DOCS: toShape @@ -1913,6 +1578,345 @@ var Path = PathItem.extend(/** @lends Path# */{ // TODO: intersect(item) // TODO: unite(item) // TODO: exclude(item) +}, /** @lends Path# */{ + // Explicitly deactivate the creation of beans, as we have functions here + // that look like bean getters but actually read arguments. + // See #getLocationOf(), #getNearestLocation(), #getNearestPoint() + beans: false, + + _getOffset: function(location) { + var index = location && location.getIndex(); + if (index != null) { + var curves = this.getCurves(), + offset = 0; + for (var i = 0; i < index; i++) + offset += curves[i].getLength(); + var curve = curves[index], + parameter = location.getParameter(); + if (parameter > 0) + offset += curve.getPartLength(0, parameter); + return offset; + } + return null; + }, + + /** + * {@grouptitle Positions on Paths and Curves} + * + * Returns the curve location of the specified point if it lies on the + * path, {@code null} otherwise. + * @param {Point} point the point on the path. + * @return {CurveLocation} the curve location of the specified point. + */ + getLocationOf: function(/* point */) { + var point = Point.read(arguments), + curves = this.getCurves(); + for (var i = 0, l = curves.length; i < l; i++) { + var loc = curves[i].getLocationOf(point); + if (loc) + return loc; + } + return null; + }, + + // DOCS: document Path#getLocationAt + /** + * + * @param {Number} offset + * @param {Boolean} [isParameter=false] + * @return {CurveLocation} + */ + getLocationAt: function(offset, isParameter) { + var curves = this.getCurves(), + length = 0; + if (isParameter) { + // offset consists of curve index and curve parameter, before and + // after the fractional digit. + var index = ~~offset; // = Math.floor() + return curves[index].getLocationAt(offset - index, true); + } + for (var i = 0, l = curves.length; i < l; i++) { + var start = length, + curve = curves[i]; + length += curve.getLength(); + if (length > offset) { + // Found the segment within which the length lies + return curve.getLocationAt(offset - start); + } + } + // It may be that through imprecision of getLength, that the end of the + // last curve was missed: + if (offset <= this.getLength()) + return new CurveLocation(curves[curves.length - 1], 1); + return null; + }, + + /** + * Calculates the point on the path at the given offset. + * + * @param {Number} offset + * @param {Boolean} [isParameter=false] + * @return {Point} the point at the given offset + * + * @example {@paperscript height=150} + * // Finding the point on a path at a given offset: + * + * // Create an arc shaped path: + * var path = new Path({ + * strokeColor: 'black' + * }); + * + * path.add(new Point(40, 100)); + * path.arcTo(new Point(150, 100)); + * + * // We're going to be working with a third of the length + * // of the path as the offset: + * var offset = path.length / 3; + * + * // Find the point on the path: + * 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' + * }); + * + * @example {@paperscript height=150} + * // Iterating over the length of a path: + * + * // Create an arc shaped path: + * var path = new Path({ + * strokeColor: 'black' + * }); + * + * path.add(new Point(40, 100)); + * path.arcTo(new Point(150, 100)); + * + * var amount = 5; + * var length = path.length; + * for (var i = 0; i < amount + 1; i++) { + * var offset = i / amount * length; + * + * // 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' + * }); + * } + */ + getPointAt: function(offset, isParameter) { + var loc = this.getLocationAt(offset, isParameter); + return loc && loc.getPoint(); + }, + + /** + * Calculates the tangent to the path at the given offset as a vector point. + * + * @param {Number} offset + * @param {Boolean} [isParameter=false] + * @return {Point} the tangent vector at the given offset + * + * @example {@paperscript height=150} + * // Working with the tangent vector at a given offset: + * + * // Create an arc shaped path: + * var path = new Path({ + * strokeColor: 'black' + * }); + * + * path.add(new Point(40, 100)); + * path.arcTo(new Point(150, 100)); + * + * // We're going to be working with a third of the length + * // of the path as the offset: + * var offset = path.length / 3; + * + * // Find the point on the path: + * var point = path.getPointAt(offset); + * + * // Find the tangent vector at the given offset: + * var tangent = path.getTangentAt(offset); + * + * // Make the tangent vector 60pt long: + * tangent.length = 60; + * + * var line = new Path({ + * segments: [point, point + tangent], + * strokeColor: 'red' + * }) + * + * @example {@paperscript height=200} + * // Iterating over the length of a path: + * + * // Create an arc shaped path: + * var path = new Path({ + * strokeColor: 'black' + * }); + * + * path.add(new Point(40, 100)); + * path.arcTo(new Point(150, 100)); + * + * var amount = 6; + * var length = path.length; + * for (var i = 0; i < amount + 1; i++) { + * var offset = i / amount * length; + * + * // 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); + * + * // Make the tangent vector 60pt long: + * tangent.length = 60; + * + * var line = new Path({ + * segments: [point, point + tangent], + * strokeColor: 'red' + * }) + * } + */ + getTangentAt: function(offset, isParameter) { + var loc = this.getLocationAt(offset, isParameter); + return loc && loc.getTangent(); + }, + + /** + * Calculates the normal to the path at the given offset as a vector point. + * + * @param {Number} offset + * @param {Boolean} [isParameter=false] + * @return {Point} the normal vector at the given offset + * + * @example {@paperscript height=150} + * // Working with the normal vector at a given offset: + * + * // Create an arc shaped path: + * var path = new Path({ + * strokeColor: 'black' + * }); + * + * path.add(new Point(40, 100)); + * path.arcTo(new Point(150, 100)); + * + * // We're going to be working with a third of the length + * // of the path as the offset: + * var offset = path.length / 3; + * + * // Find the point on the path: + * var point = path.getPointAt(offset); + * + * // Find the normal vector at the given offset: + * var normal = path.getNormalAt(offset); + * + * // Make the normal vector 30pt long: + * normal.length = 30; + * + * var line = new Path({ + * segments: [point, point + normal], + * strokeColor: 'red' + * }); + * + * @example {@paperscript height=200} + * // Iterating over the length of a path: + * + * // Create an arc shaped path: + * var path = new Path({ + * strokeColor: 'black' + * }); + * + * path.add(new Point(40, 100)); + * path.arcTo(new Point(150, 100)); + * + * var amount = 10; + * var length = path.length; + * for (var i = 0; i < amount + 1; i++) { + * var offset = i / amount * length; + * + * // 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); + * + * // Make the normal vector 30pt long: + * normal.length = 30; + * + * var line = new Path({ + * segments: [point, point + normal], + * strokeColor: 'red' + * }); + * } + */ + getNormalAt: function(offset, isParameter) { + var loc = this.getLocationAt(offset, isParameter); + return loc && loc.getNormal(); + }, + + /** + * Returns the nearest location on the path to the specified point. + * + * @function + * @param point {Point} the point for which we search the nearest location + * @return {CurveLocation} the location on the path that's the closest to + * the specified point + */ + getNearestLocation: function(/* point */) { + var point = Point.read(arguments), + curves = this.getCurves(), + minDist = Infinity, + minLoc = null; + for (var i = 0, l = curves.length; i < l; i++) { + var loc = curves[i].getNearestLocation(point); + if (loc._distance < minDist) { + minDist = loc._distance; + minLoc = loc; + } + } + return minLoc; + }, + + /** + * Returns the nearest point on the path to the specified point. + * + * @function + * @param point {Point} the point for which we search the nearest point + * @return {Point} the point on the path that's the closest to the specified + * point + * + * @example {@paperscript height=200} + * var star = new Path.Star({ + * center: view.center, + * points: 10, + * radius1: 30, + * radius2: 60, + * strokeColor: 'black' + * }); + * + * var circle = new Path.Circle({ + * 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); + * + * // Move the red circle to the nearest point: + * circle.position = nearestPoint; + * } + */ + getNearestPoint: function(/* point */) { + return this.getNearestLocation.apply(this, arguments).getPoint(); + } }, new function() { // Scope for drawing // Note that in the code below we're often accessing _x and _y on point diff --git a/src/path/Segment.js b/src/path/Segment.js index b2011142..40959dcd 100644 --- a/src/path/Segment.js +++ b/src/path/Segment.js @@ -223,8 +223,6 @@ var Segment = Base.extend(/** @lends Segment# */{ }, setHandleOut: function(/* point */) { - // We need to use point to avoid minification issues and prevent method - // from turning into a bean (by removal of the point argument). var point = Point.read(arguments); // See #setPoint: this._handleOut.set(point.x, point.y); @@ -244,9 +242,11 @@ var Segment = Base.extend(/** @lends Segment# */{ return this._handleIn.isZero() && this._handleOut.isZero(); }, - setLinear: function() { - this._handleIn.set(0, 0); - this._handleOut.set(0, 0); + setLinear: function(linear) { + if (linear) { + this._handleIn.set(0, 0); + this._handleOut.set(0, 0); + } }, // DOCS: #isColinear(segment), #isOrthogonal(), #isArc() diff --git a/src/ui/View.js b/src/ui/View.js index 39f9102c..fbe353fc 100644 --- a/src/ui/View.js +++ b/src/ui/View.js @@ -397,10 +397,8 @@ var View = Base.extend(Callback, /** @lends View# */{ return this.getBounds().getCenter(); }, - setCenter: function(center) { - // We need to use center to avoid minification issues and prevent method - // from turning into a bean (by removal of the center argument). - center = Point.read(arguments); + setCenter: function(/* center */) { + var center = Point.read(arguments); this.scrollBy(center.subtract(this.getCenter())); },